HighCharts：如何读取 JSON 数据答案

【问题标题】：HighCharts: How to read the JSON dataHighCharts：如何读取 JSON 数据
【发布时间】：2013-07-18 16:11:49
【问题描述】：

这是我的 JSON：

  [{"name":"AniSig01",
    "data":[["2013,06,11,16,06,55",14],
            ["2013,06,11,16,07,00",14],
            ["2013,06,11,16,07,06",15],
            ["2013,06,11,16,07,11",14]]},
   {"name":"AniSig02",
    "data":[["2013,06,11,16,06,55",0],
            ["2013,06,11,16,07,00",0],
            ["2013,06,11,16,07,06",0],
            ["2013,06,11,16,07,11",0]]},
   {"name":"AniSig03",
    "data":[["2013,06,11,16,06,55",6],
            ["2013,06,11,16,07,00",6],
            ["2013,06,11,16,07,06",7],
            ["2013,06,11,16,07,11",6]]},
   {"name":"AniSig04",
    "data":[["2013,06,11,16,06,55",13],
            ["2013,06,11,16,07,00",13],
            ["2013,06,11,16,07,06",14],
            ["2013,06,11,16,07,11",13]]}]

还有我的 HighCharts 代码：

   $(document).ready(function()
   {
      var options =
      {
         chart:
         {
             renderTo: 'container',
             type: 'spline',
         },
         title:
         {
             text: 'Statistik',
         },
         xAxis:
         {
            type:'datetime',
         },
         yAxis:
         {
             title: { text: ''},
         },
         tooltip:
         {
            shared: true,
            crosshairs: true,
         },
         plotOptions:
         {
            series:
            {
               marker: {enabled: false},
               animation: false,
               threshold: null
            }
         },
         series:[]
      };

  $.getJSON('datgen/DatReq.txt',function(data)
  {
     $.each(data, function(key,value)
     {
        var series = { data:[]};
        $.each(value, function(key,val)
        {
           if (key == 'name')
           {
              series.name = val;
           }
           else
           {
              $.each(val, function(key,val)
              {
                 val[0] = 'Date.UTC(' + val[0] + ')';
                 series.data.push(val[0], val[1]);
              });
           }
        });
       options.series.push(value);
     });

  var linechart = new Highcharts.Chart(options);
  });
  });

但我仅将这 4 个信号视为图表上的一个点（垂直线）。并且工具提示没有显示正确的时间（x 值）！

有谁知道问题出在哪里？

【问题讨论】：

不知道什么是“HighChart”，但花 5-10 分钟查看 json.org，以更好地理解 JSON 语法。
你有jsFiddle.net 吗？我们会更容易理解并帮助您指出问题。
是点还是线？不能两者兼而有之。你看到了什么 x 值（时间）？这个问题尖叫破坏时间解析。检查你的时间解析。

标签： javascript jquery json date highcharts

【解决方案1】：

正如您所发现的，您的 X 值有问题。它们不仅是错误的（根据工具提示），而且它们似乎对于每个点都相同错误（给你一条垂直线）。

所以，让我们专注于 X 值。这些是什么？好的，次。在某些时候，您必须将数据源中的时间解析为 Javascript。你是在哪里做的？

这里：

val[0] = 'Date.UTC(' + val[0] + ')';

我们开始了——Javascript 函数根本不能那样工作。你不能只是把代码塞进一个字符串然后期望它被执行。

在逗号字符上拆分val[0]，并将结果的每一部分提供给Date.UTC 的real 调用。

【讨论】：