1

データベースのデータをライブで表示する折れ線グラフを作成したいと考えています。

約 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],
]

しかし、それは私のチャートには表示されません。

この作業を手伝ってもらえますか？

4

1 に答える 1

0

できます。私はあなたが直面している問題を知りません。しかし、私が見ているのは、データ間の時間間隔がミリ秒単位であり、より大きなティック間隔を提供していることです。

maxzoomperiodと同様に、ティック間隔を削除しました（ハイチャートが自動的にプロットするように）。

ここで確認してください。http://jsfiddle.net/pLUza/

PS：シリーズオプションのデータフィールドにデータを埋め込んだだけです。ただし、AJAX を使用しても結果は変わりません。

于 2012-06-12T11:50:15.927 に答える