首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >尝试将JSON数据传递到Highcharts,但未成功

尝试将JSON数据传递到Highcharts,但未成功
EN

Stack Overflow用户
提问于 2012-11-26 02:30:04
回答 2查看 1.5K关注 0票数 0

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

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

代码语言:javascript
复制
<?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输出为:

代码语言:javascript
复制
[{"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>内幕

代码语言:javascript
复制
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);
    },
});
}

如何使用x轴'item.date‘和y轴'item.count’创建名为total players的系列赛?

请帮帮我!

更新:我在每个中添加了以下内容:

代码语言:javascript
复制
monitor_graph.xAxis[0].setCategories([item.date]);
monitor_graph.series[0].setData([parseFloat(item.count)]); 

现在我得到了我需要的1点,但有以下错误:

代码语言:javascript
复制
Unexpected value NaN parsing y attribute.
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-26 18:48:16

您需要将success回调修改为如下所示

代码语言:javascript
复制
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);

方法需要一个整型/浮点型数组,而不是字符串数组,并且应该使用整个数据集而不是每个点来调用。您在$.each内部执行此操作时,应该在此循环外部执行此操作。类别也是如此

票数 2
EN

Stack Overflow用户

发布于 2012-11-26 02:37:37

您收到的数据是带有对象的数组形式。您需要迭代数组,您已经在$.each函数中这样做了。这将使您能够以i变量的形式访问每个对象。这个变量可以通过点符号访问所需的属性。在您的例子中,应该是i.date和i.count。

据我所知,setData方法接受您可以设置的值的数组,因此请替换您的?具有以下功能:

代码语言:javascript
复制
monitor_graph.series[0].setData([i.date, i.count]);

希望这能有所帮助。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13554074

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档