Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/grails/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用ajax和动态更新在highchart上放置两行_Javascript_Ajax_Highcharts_Dynamic Data - Fatal编程技术网

Javascript 使用ajax和动态更新在highchart上放置两行

Javascript 使用ajax和动态更新在highchart上放置两行,javascript,ajax,highcharts,dynamic-data,Javascript,Ajax,Highcharts,Dynamic Data,我正在尝试使用带有动态(定期)更新的ajax在Highchart上添加第二行。使用ajax,第一行可以很好地工作。我认为问题在于传入数据的格式,以及如何为每一行分割数据 我可以控制ajax数据的格式,所以它可以以任何形式发布,但它适用于第一行 以下是随每个请求一起接收的ajax数据: [Date.parse("2013/02/14 14:29:00 -0000"), 51, 216510] 这将在51处为第一条线创建一个点,但在216510处为第二条线创建任何点 以下是我正在使用的javas

我正在尝试使用带有动态(定期)更新的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-----------------

在您的
成功
-操作/功能中,您仅在更新
系列[0]


如果要向第二行添加点,还必须向
系列[1]
添加点。

循环添加
,以对每个系列执行相同操作

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);  
}
成功:功能(点){
对于(var i=0,length=chart.series.length;i30;
//补充一点
系列添加点(评估(点)、真实、移位);
}
//一秒钟后再打
setTimeout(requestData,1000);
}