将 JSON 数据加载到 Highchart答案

【问题标题】：Load JSON data to Highchart将 JSON 数据加载到 Highchart
【发布时间】：2013-01-24 19:23:14
【问题描述】：

我正在尝试使用从 MySQL 获取的数据绘制样条图。

<script> 
var chart; 
function requestData() 
{
    $.ajax({
    url: 'get_hourly_data.php',
    datatype: "json",
    success: function(data) 
    {
            chart.series[0].addPoint(data);
    },      
    });
}
$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
chart = new Highcharts.Chart({
     chart: {
        renderTo: 'graph',
        type: 'spline',
        events: {
            load: requestData
        }
     },
     title: {
        text: 'Monitoring'
     },
     xAxis: {
        type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
     },
     yAxis: {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Response time (ms)',
                margin: 80
            }
     },
     series: [{
        name: 'Time',
        data: [],
     }]
  });
  });

    </script>

get_hourly_data.php

<?php
// Query to fetch half an hour data from current time
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";

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

while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
    $response_time = $item['response_time']*1;      
    $ret = array($current_time, $response_time);        
    echo json_encode($ret);
}
?>

My JSON data looks like this
[1357536877000,0.012178182601929][1357536881000,0.0123610496521][1357536891000,0.011971950531006][1357536895000,0.011821985244751][1357536916000,0.010467052459717]

如果我通过在 get_hourly_data.php 中替换下面提到的查询来仅限制一个返回值，则可以用一个值而不是一组值绘制图形。要求是从现在开始获取半小时的数据并绘制样条图。

$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2' limit 1";

我想在将服务器数据添加到图形时做错了什么。可能在 jQuery 成功函数之后。我是第一次使用 stackoverflow 用户和 jQuery 新手。有人可以指导我吗？

【问题讨论】：

标签： highcharts

【解决方案1】：

发布完美运行的代码。

<script> 
var chart; 
function requestData() 
{
    $.ajax({
    url: 'get_hourly_data.php',
    datatype: "json",
    success: function(data) 
    {
           chart.series[0].setData(data);
    },      
    });
}
$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
chart = new Highcharts.Chart({
     chart: {
        renderTo: 'graph',
        type: 'spline',
        events: {
            load: requestData
        }
     },
     title: {
        text: 'Monitoring'
     },
     xAxis: {
        type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
     },
     yAxis: {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Response time (ms)',
                margin: 80
            }
     },
     series: [{
        name: 'Time',
        data: [],
     }]
  });
  });
    </script>

get_hourly_data.php：

$ret = array();
while($item = mysql_fetch_array($result)) 
{
        $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
        $response_time = $item['response_time']*1;  
        $y = rand(0, 100);          
        $ret[] = array($current_time, $response_time);      
    }
    echo json_encode($ret);

【讨论】：

【解决方案2】：

您在 while 循环中回显。您需要为数据创建一个数组数组。

你需要你的 JSON 看起来像

[[1357536877000,0.012178182601929],[1357536881000,0.0123610496521],[1357536891000,0.011971950531006],[1357536895000,0.011821985244751],[1357536916000,0.010467052459717]]

这样的事情可能会奏效

$dataArr=new array();
while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
    $response_time = $item['response_time']*1;      
    $dataArr[] = array($current_time, $response_time);        
}
echo json_encode($dataArr);

【讨论】：

谢谢 :) 提到更改后，我的 JSON 看起来像这样 [[1357559481000,0.54504299163818],[1357559487000,0.50053811073303]] 不幸的是，无法绘制图表。当我在成功函数中“警报（数据）”时，我得到 1357559481000,0.54504299163818,1357559487000,0.50053811073303 'chart.series[0].addPoint(data)' 访问系列数据的正确方法吗？请提出建议。
在你的成功函数中试试这个：chart.series[0].data = data;
成功添加功能：chart.series[0].setData(data);它奏效了。感谢所有帮助过我的人。

【解决方案3】：

$query = "SELECT UNIX_TIMESTAMP(current_ts) * 1000, response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";

$dataArr = new array();
while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)'];
    $response_time = $item['response_time'];      
    $dataArr[] = array($current_time, $response_time);        
}
echo json_encode($dataArr);

关于成功函数

success: function(data) 
{
    data = jQuery.parseJSON(data);
    chart.series[0].addPoint(data);
}

【讨论】：