0

動的 (定期的な) 更新で ajax を使用して、ハイチャートに 2 行目を追加しようとしています。最初の行は、ajax を使用して正常に動作します。問題は受信データの形式だと思いますが、各行のデータを どのように分割するかにも問題があります。

私は ajax データの形式を制御できるので、ほとんどの形式で投稿できますが、最初の行で機能します。

各リクエストで受信される ajax データは次のとおりです。

[Date.parse("2013/02/14 14:29:00 -0000"),  51, 216510]

これにより、最初の行のポイントが51に作成されますが、 216510にあるはずの 2 行目のポイントは作成されません。

以下は私が使用しているjavascriptです：

        var chart; // global



    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {

        $.ajax({
            url: '/htbin/count_since_total', 
            success: function(point) {
                var series = chart.series[0],
                shift = series.data.length > 30; // shift if the series is longer than 300 (drop oldest point)

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

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

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'time'
            },
            xAxis: {
                type: 'datetime'
            },
        yAxis: [{ // Primary yAxis

            title: {text: 'count'},
            opposite: false

        }, { // Secondary yAxis

            title: {text: 'Total'},
            opposite: true
        }],

            series: [{
                yAxis: 0,
                name: 'number',
                data: []
            },{
                yAxis: 1,
                name: 'Total',
                data: []
            }],

        });     
    });



編集 1: 機能していません。提案された変更を含む 2 行目はありません。受信データのフォーマットが間違っているか、受信後の処理が必要と思われます。また、データはどのように適切な行に割り当てられますか?

            series: [{
                yAxis: 0,
                name: 'number',
                data: []
            },{
                yAxis: 1,
                name: 'Total',
                data: []
            }],

--------- 編集 1 を終了 ----------------

4

2 に答える 2

0

success-action/function では、更新のみを行っていますseries[0]。

2 行目にポイントを追加する場合は、ポイントも追加する必要がありますseries[1]。

于 2013-02-14T21:13:19.697 に答える
0

forシリーズごとに同じことを行うループを追加します。

success: function(point) {
    for(var i = 0, length = chart.series.length; i < length; i++) {
        var serie = chart.series[i],

        // shift if the series is longer than 300 (drop oldest point)
        var shift = serie.data.length > 30;

        // add the point
        serie.addPoint(eval(point), true, shift);

    }

    // call it again after one second
    setTimeout(requestData, 1000);  
}
于 2013-02-14T22:00:06.400 に答える