Highcharts with JSON

本文关键字：JSON with Highcharts | 更新日期: 2023-11-26

我正试图使用数据库中调用json的数据创建一个图表，但它没有在图表中显示结果。到目前为止，这是我的代码：

$(document).ready(function() {
function requestData() {
$.ajax({
        url: 'data.php',
        datatype: 'json',
        success: function(data) {
        alert(data);
        chart.series[0].setData(data[0]);
        },
        cache: false
    });
}
var chart;
chart = new Highcharts.Chart({
    chart: {
            renderTo: 'container',
            type: 'line',
            events: {
               load: requestData
            }
            },
    xAxis: {
  },
  yAxis: {
     title: {
        text: 'Value'
     }
  },
series: [{
         name: 'Random data',
         data: []
            }]
});
});

这是我的数据.php代码

$query = "SELECT tiempo,Fp1Ref 
        FROM GraficaEEG limit 10";
$data = mysqli_query($dbc, $query);
$i=0;
while($row = mysqli_fetch_array($data)) {
    $row['tiempo'] = (float) $row['tiempo'];
    $rows[$i]=array($row['tiempo'],(float)$row['Fp1Ref']); 
    $i++;
}
echo json_encode($rows);

我收到的数据是：

[[0,3001],[0.005,4937.22],[0.01,4130.55],[0.015,4213.15],[0.02,4010.61],[0.025,3914.34],[0.03,3785.33],[0.035,3666.13],[0.04,3555.25],[0.045,3447.77]]

所以我认为这是传递图表数据的正确方式，所以我不太明白哪里出了问题，提前谢谢。

我认为问题是，当您的requestData（）函数被触发时，chart变量仍然没有完全构建，并且不知道它具有series属性
要解决此问题，请引用this（表示该上下文中的图表对象），而不是requestData（）函数中的chart。我在jsfiddle这里试过这个http://jsfiddle.net/elcabo/p2r6g/.
还可以在下面发布js代码。

$(function () {
    $(document).ready(function() {
        //Function bits
        function requestData(event) {
            var tiemposAlAzar = [[10,20],[20,50]];
            //The 'this' will refer to the chart when fired
            this.series[0].setData(tiemposAlAzar);
        };
        var chart;
        //Chart bits
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                events:{
                    load: requestData                           
                }
            },
            xAxis: {},
            yAxis: {
                title: {
                text: 'Value'
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
      });
    });
});

这个url可以帮助您创建需要从数据库中提取数据的动态图表。

在json.php代码中，您可以放置sql查询，并将静态数组替换为动态数组

http://www.kliptu.com/free-script/dynamic-highchart-example-with-jquery-php-json

该示例还展示了如何使用json管理多个系列。以及在鼠标点上显示所有系列数据的工具提示。

您可以根据脚本要求修改示例。