Highchart和json数据答案

【问题标题】：Highchart and json dataHighchart和json数据
【发布时间】：2016-04-13 14:25:20
【问题描述】：

我的 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 值？

【问题讨论】：

是的。格式不正确。查看文档以了解正确的格式
我只是不明白我的图表没有显示任何内容，并且我没有收到任何错误
它没有显示任何值，因为您没有提供任何值。您有一个日期列表，没有相应的数据值 - 图表没有任何内容可显示，但也没有错误可显示。如果要显示每个日期出现的次数，则必须处理数据并确定。然后以正确的格式将数据发送到图表。
所以我需要这样的东西吗？ [{"2016-04-11 20:00:00","8"},{"2016-04-11 21:00:00","11"}], 时间戳和值
数据格式不正确。要让 highcharts 了解您的日期时间格式，您需要在将其传递给 highcharts 或将其转换为时间戳（纪元毫秒）之前创建日期对象。另外，highcharts 不理解键 'TS' 和 'COUNT'，使用 x 和 y。

标签： javascript jquery json database highcharts

【解决方案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，所以你可以看到它正在工作。

希望对你有所帮助

【讨论】：

【解决方案2】：

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

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

<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>

【讨论】：

我的数据是用户注册活动时的时间戳。我想显示有多少人注册了 pr。带图表的小时