0

我正在尝试使用带有动态（定期）更新的 ajax 在 Highchart 上添加第二行。第一行使用 ajax 可以正常工作。我认为问题在于传入数据的格式，还有我如何为每一行 拆分数据。

我可以控制 ajax 数据的格式，因此它可以以几乎任何形式发布，但它适用于第一行。

这是每个请求收到的 ajax 数据：

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

这将为第一行在51创建一个点，但不会为第二行创建一个点，该点应该在216510。

以下是我正在使用的 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：不工作，没有建议更改的第二行。我认为传入的数据格式不正确或接收后需要处理。此外，数据如何分配到正确的行？

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

---------结束编辑1 ----------------

4

2 回答 2

0

在您的success-action/function 中，您只是在更新series[0].

如果你想在第二行添加一个点，你也必须添加一个点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 回答