Question

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

$(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
      }]
    });
  });
});

我很困惑。似乎JSON的格式错误或类似。

[{"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"},

修改

我设法制作了这样的数据：

{{1}}

如何在图表中将其作为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，所以你可以看到它正常工作。

希望我帮助过你

Answer 2

您可以将JSON对象数组转换为嵌套数组。第一个索引是时间戳，第二个索引是计数。

＆＃13;

var data = [{"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"}];

// Used to transform the AJAX loaded data into stock data.
function processData(data, xField, yField) {
  return data.map(function(obj) {
    return [ new Date(obj[xField]).getTime(), parseInt(obj[yField], 10) ];
  });
}

$(function() {
  //$.getJSON('json/json.php', function (data) {  // We will ignore the AJAX call for now.
    data = processData(data, 'TS', 'COUNT');      // Process the data.
    $('#container').highcharts('StockChart', {
      rangeSelector: {
        selected: 1
      },
      title: {
        text: 'Sign-up Counts by Date'
      },
      xAxis: {
        title: {
          text: 'Date of Sign-up'
        }
      },
      yAxis: {
        title: {
          text: 'Count'
        }
      },
      series: [{
        name: 'Sign-ups',
        data: data,
        tooltip: {
          valueDecimals: 2
        }
      }]
    });
  //});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container"></div>

＆＃13;

Highchart和json数据

修改

2 个答案: