使用ajax来自mysql的highchart数据

Posted 2023-02-24

技术标签:

【中文标题】使用ajax来自mysql的highchart数据【英文标题】：highchart data from mysql using ajax 【发布时间】：2012-06-09 07:43:47 【问题描述】：

我想创建一个实时显示数据库中数据的折线图。

我大约每 100 微秒将新数据放入我的数据库中。

我使用 ajax 来检查新数据。

这是我的代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
$(function () 
    var chart = new Highcharts.Chart(
        chart: 
            renderTo: 'container'
        ,
        xAxis: 
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        ,

        series: [
            name: 'Random data',
            data: []
        ]
    );

    $('#button').click(function() 
        $.get('data.php', function(data) 
        chart.series[0].setData(data);
        );
    );
);
</script>
  </head>

  <body>
    <div id="container" style="width: 100%; height: 400px"></div>
    <button id="button">Set new data</button>
  </body>
</html>

data.php 返回以下内容：

[
[Date.UTC(0000, 00, 00, 11, 11, 47, 7), 144],
[Date.UTC(0000, 00, 00, 11, 11, 47, 17), 143],
[Date.UTC(0000, 00, 00, 11, 11, 47, 29), 142],
[Date.UTC(0000, 00, 00, 11, 11, 47, 39), 141],
]

但它没有显示在我的图表中。

你能帮我完成这项工作吗？

【问题讨论】：

【参考方案1】：

它有效。我不知道你面临什么问题。但我看到的是您的数据之间的时间间隔以毫秒为单位，并且您提供了更大的滴答间隔。

我删除了刻度间隔（以便 highcharts 自动绘制它们）以及 maxzoomperiod。

在这里查看。 http://jsfiddle.net/pLUza/

PS：我只是将数据嵌入到系列选项中的数据字段中。但是，当您使用 AJAX 时，结果将保持不变。

【讨论】：

以上是关于使用ajax来自mysql的highchart数据的主要内容，如果未能解决你的问题，请参考以下文章

来自 php mysql 的 Highcharts 钻取 json

带有传入 Json 数据的 Highcharts 实时图表 [已修复 []