设置日期时间时从 JSON 文件错误加载 Highcharts 数据答案

【问题标题】：Highcharts data loading from a JSON file error in setting up datetime设置日期时间时从 JSON 文件错误加载 Highcharts 数据
【发布时间】：2015-08-08 16:45:10
【问题描述】：

我想通过从 JSON 文件加载来设置日期时间 -> http://jsfiddle.net/4MQp5/7/ 问题似乎是Highcharts无法识别测试文件中写入的UTC时间或更公平地说，我真的不知道如何写下来.. 在这里需要认真的帮助。基本上我需要的是一些温度值（我将从该文件中加载）显示一个带有真实日期值的图表。我在上面放了一个链接，但这里也是代码：

<script src="http://code.highcharts.com/highcharts.js"></script>
<input type="hidden" id="test" value='[{"id": 9,"datum": 1437931522000,"dim": 30}, {"id": 10,"datum": 1437931555000,"dim": 30.25}, {"id": 11,"datum": 1437931768000,"dim": 30.25}, {"id": 12,"datum": 1437931785000,"dim": 29.75}]'>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


$(document).ready(function () {
    var line2 = $.parseJSON(document.getElementById("test").value);

    Highcharts.setOptions({
        global: { useUTC: false } });

    var mydata = [],
        mydata1 = [],
        mydata2 = [];

    for (var i = 0; i < line2.length; i++) {
        //mydata[0].push([line2[i].time,line2[i].valueint]);
        mydata.push(line2[i].id);
        mydata1.push(line2[i].datum);
        mydata2.push(line2[i].dim);
    }



    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {

            type: 'datetime',
            dateTimeLabelFormats: {
            month: '%b %e, %Y',
            year: '%Y'
         }




        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Temp',
            data: mydata

        },{
            name: 'temp2',
            data: mydata2

        }]
    });
});

【问题讨论】：

标签： jquery json datetime highcharts

【解决方案1】：

如果您获取日期值（来自 json 的数据）并将其放入 x 轴的类别属性中，它将显示日期。见下文

$(document).ready(function() {
  var line2 = $.parseJSON(document.getElementById("test").value);

  Highcharts.setOptions({
    global: {
      useUTC: true
    }
  });

  var mydata = [];
  var times = [];

  for (var i = 0; i < line2.length; i++) {
    mydata.push(line2[i].dim);
    times.push(new Date(line2[i].datum).toUTCString());
  }

  $('#container').highcharts({
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        month: '%b %e, %Y',
        year: '%Y'
      },
      categories: times
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Temp',
      data: mydata

    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<input type="hidden" id="test" value='[{"id": 9,"datum": 1437931522000,"dim": 30}, {"id": 10,"datum": 1437931555000,"dim": 30.25}, {"id": 11,"datum": 1437931768000,"dim": 30.25}, {"id": 12,"datum": 1437931785000,"dim": 29.75}]'>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

【讨论】：

【解决方案2】：

您可以将数据点创建为[line2[i].datum, line2[i].dim]，如果您想将dateTimeLabelFormats 用于xAxis，那么您必须在使用的时间范围内定义格式。对于此数据，将使用 minute 范围。

示例：http://jsfiddle.net/s89hqnc5/

API 参考：http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats

【讨论】：