javascript - Highchart 和 json 数据

Question

我的 JSON 看起来像这样，我想制作一个 Highchart，显示每小时的注册次数。所以我的 X 轴将是同一天和同一小时的时间戳数量的计数。

[{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 12:18:40"},{"data":"2016-04-11 13:18:40"},{"data":"2016-04-11 13:18:34"},{"data":"2016-04-11 14:18:34"},{"data":"2016-04-11 15:18:34"},{"data":"2016-04-11 15:18:30"},{"data":"2016-04-11 19:18:29"},{"data":"2016-04-11 19:18:29"},{"data":"2016-04-11 20:18:18"},{"data":"2016-04-11 21:18:12"},{"data":"2016-04-11 22:18:09"},{"data":"2016-04-11 23:18:08"}];

我被困住了。 JSON 的格式似乎有误或其他原因。

$(function() {
  $.getJSON('json/json.php', function(data) {
    //console.log(data);
    // Create the chart
    $('#container').highcharts('StockChart', {
      rangeSelector: {
        selected: 1
      },
      xAxis: {
        type: 'datetime'
      },
      title: {
        text: 'test'
      },

      series: [{
        name: 'signups',
        data: data,
        turboThreshold: 0
      }]
    });
  });
});

<小时/>

编辑

我设法使我的数据如下:

[{"TS":"2016-04-12 00:00:05","COUNT":"187"},{"TS":"2016-04-12 01:00:30","COUNT":"75"},{"TS":"2016-04-12 02:00:56","COUNT":"32"},

如何将其设置为图表中的 X 和 Y 值？

Answer 1

您使用的是 Highstock，因此您的数据应以时间序列(时间、值)的形式给出。

让我们举个例子:

yourData = [{"TS":"2016-04-12 00:00:05","COUNT":"187"},{"TS":"2016-04-12 01:00:30","COUNT":"75"},{"TS":"2016-04-12 02:00:56","COUNT":"32"}....]

应该看起来像:

[[time1.TS, value1.COUNT], [time2.TS, value2.TS], [time3.TS, value3.COUNT]] // pay attention it's an array of arrays.

这个简单的函数应该能够根据需要格式化您的数据:

var formattedData = [];
for(var i = 0; i < yourData.length; i++){
    formattedData.push([ new Date(yourData[i].TS).getTime(), parseInt(yourData[i].COUNT)]);
        }

我做了一个FIDDLE ，这样你就可以看到它正在工作。

希望对你有帮助