1

ハイチャートの縦棒棒グラフを実行することはできますか? 私はそれを数回試しましたが、残念ながら、これはリロードせずにデータを更新する実際の方法ではありません.

私は職場で行った方法であるいくつかの疑似コードを作成しました（私は今そこにいないので、コードにアクセスできません）。

ループを作成して、5,000 回または 5 秒の遅延で実行する必要がありますか? どのように進めればよいかよくわかりません。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
< your typical ajax call function here
    return some value;
>


$(function () {
    <var ajax_far = ajax_function();>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Some Bar'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: 'Tokyo',
                data: [ajax_var]

            }]
        });
    });

}, 5000);
        </script>
    </head>
    <body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
4

3 に答える 3

1

ajax呼び出しは、チャートを表示するための新しいデータを取得するだけです。グラフ全体を再描画する必要はありません。系列データを置き換えるか、個々のポイントを追加するだけです。これを行うための良い記事がhighchartsのWebサイトhttp://docs.highcharts.com/#preprocessing-live-dataにありますが、彼らが提案するajaxコードは次のとおりです。

/**
 * Request data from the server, add it to the graph and set a timeout to request again.
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // Shift if the series is longer than 2.

            // Add the point.
            chart.series[0].addPoint(point, true, shift);

            // Call it again after one second.
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}

このコードでは、requestData関数が毎秒（setTimoutを介して）呼び出されます。live-server-data.phpへのajax呼び出しを介して新しいデータポイントを取得し、chart.series[0].addPointを使用してチャートに追加します。

ajax呼び出しがシリーズ全体を返した場合は、chart.series [0] .setDataを呼び出して、シリーズ全体を置き換えます。

心配する必要があるのは、addPointまたはsetDataの呼び出しを開始する前にチャートが作成されていることを確認することだけです。

于 2013-03-20T09:08:46.160 に答える
1

ajax コードを 1 つの関数に入れ、ready 関数から呼び出す...これを試してください

$(document).ready(function(){
example();
 setInterval("example()",5000);
}
function example()
{
//ajax code here

}
于 2013-03-20T04:35:11.050 に答える
0 
   $(function () {
    var chart;
    var list;
    $(document).ready(function() {
        var options = {
            chart: {
               //all chart attr here
                 }
                //other attr
           }
 chart = new Highcharts.Chart(options);
    setInterval(function() {
        $.ajax({
        type: "GET",
        url: "service",
        dataType: "json",
        success: function (data) 
    { 
           chart.series[0].setData(data);
        }
    }),1000); //will set ur data to ajax data every 1 sec
                  if u want to update to existing chart data try addPoint()
});
});
于 2013-03-21T12:28:15.787 に答える