尝试将 JSON 数据传递给 Highcharts 但没有成功

Question

我正在尝试将由 php 文件创建的 json 数据解析为另一个脚本，并将其值显示到高图。

我创建 json 数据的 data.php 是这样的：

<?php
header("Content-type: application/json");

$dbhost = "localhost";
$dbuser = "db";
$dbpass = "xxxxx";
$dbname = "db";
$db = mysql_connect($dbhost, $dbuser, $dbpass); 
mysql_select_db($dbname,$db);
$query = "SELECT * FROM monitor_total";

$result = mysql_query($query,$db);

while($row = mysql_fetch_array($result)) {
  $date = $row["date"];
  $count = $row["count"];
  $array[] = array("date" =>$date,"count"=>$count);
}
echo json_encode($array);
?>

data.php 输出为：

[{"date":"2012-11-23","count":"582311"},{"date":"2012-11-24","count":"582322"},{"date":"2012-11-22","count":"582121"},{"date":"2012-11-21","count":"581321"},{"date":"2012-11-19","count":"572821"},{"date":"2012-11-20","count":"581321"},{"date":"2012-11-18","count":"582421"},{"date":"2012-11-17","count":"579321"},{"date":"2012-11-16","count":"581321"},{"date":"2012-11-25","count":"558178"}]

在<script>内：

var monitor_graph; // globally available
    monitor_graph = new Highcharts.Chart({
     chart: {
        renderTo: 'graph',
        type: 'spline',
        events: {
            load: requestData
        }
     },
     title: {
        text: 'Registered and total players by date'
     },
     xAxis: {
       categories: []
     },
     yAxis: {
        title: {
           text: 'Players'
        }
     },
     series: [{
        name: 'Total Players',
        data: []
     }]
  });
function requestData() {
$.ajax({
        url: 'data.php',
    success: function(data) {
       $.each(data, function(i,item){

              monitor_graph.series[0].setData(??????????);

       });
     setTimeout(requestData, 1000);
    },
});
}

我如何创建一个名为 total player 的系列，x 轴为“item.date”，y 轴为“item.count”？？？

请帮帮我！

更新： 我在每个里面添加这个：

monitor_graph.xAxis[0].setCategories([item.date]);
monitor_graph.series[0].setData([parseFloat(item.count)]); 

我现在完全按照我的需要得到 1 分，但出现以下错误：

Unexpected value NaN parsing y attribute.

Answer 1

您收到的数据是包含对象的数组形式。您需要遍历数组，这已经在 $.each 函数中进行了。这将使您能够以 i 变量的形式访问每个对象。此变量可以通过点符号访问您需要的属性。在您的情况下，这将是 i.date 和 i.count。

据我所知，setData 方法接受一个数组作为您可以设置的值，因此请替换您的 ????带有以下内容：

monitor_graph.series[0].setData([i.date, i.count]);

希望有帮助。

Answer 2

您需要将您的成功回调修改为类似这样的内容

var categories=[];
var seriesData=[];
$.each(data,function(){
    categories.push(this.date);
    seriesData.push(parseInt(this.count));
});
chart.xAxis[0].setCategories(categories);
chart.series[0].setData(seriesData);

Series.setData() 方法需要一个 int/float 数组而不是字符串，并且应该使用整个数据集而不是每个点来调用。您在$.each 内执行此操作应该在此循环之外完成。类别也是如此

Demo @ jsFiddle