【问题标题】:Updating Chart with live Values, adding second line使用实时值更新图表,添加第二行
【发布时间】:2019-03-05 12:43:58
【问题描述】:

我正在尝试在我的图表中添加第二行,但我似乎无法正确添加该行。我的第一行使用 ajax 查询获得了新点,并且添加得很好。当我尝试在同一个图表中添加第二条线时,我确实被添加到了图例中,但它没有绘制在我的图表上。 这是我的代码

var series = this.series[0];
                var series1 = this.series[1];
                setInterval(function () {
    $.getJSON('http://10.175.129.10/output_file.json', function(data) 
            {
            pp_time_offset_value =`${(data[0].pp_time_offset )}`
            var par = parseInt(pp_time_offset_value);

            time_offset_value =`${(data[0].time_offset )}`
            var par2 = parseInt(time_offset_value);

                    var x = (new Date()).getTime(); // current time
                     //y = par;#

                    <!-- y= Math.random() * (500 - 200) + 200 -->
                    series.addPoint([x, par,par2], true, true);
                    //series.addPoint([x, ], true, true);
                    console.log( par2);
                    });
                }, 1000);
            }
        }
    },


    exporting: {
        enabled: false
    },
    series: [{
        name: 'pp_time_offset',
        data: (function () {
            yyy=2;
            //yyy =`${(data[0].graph_value )}`
            // generate an aray of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -60; i <= 0; i ++) {
                data.push({
                    x: time + i * 500,
                 //   y: Math.random() * (-15000 - 00) + 200
                });
            }
            return data;

        }())
    },
     {
        name: 'time offset',
          data: (function () {
            yyy=2;
            //yyy =`${(data[0].graph_value )}`
            // generate an aray of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -60; i <= 0; i ++) {
                data.push({
                    x: time + i * 500,
                 //   y: Math.random() * (-15000 - 00) + 200
                });
            }
            return data;

        }())
    }]
});

【问题讨论】:

    标签: javascript ajax dynamic highcharts linechart


    【解决方案1】:

    好的,问题解决了,问题是我将新行分配给旧数据并覆盖它。解决方案

                    var series = this.series[0];
                    var series1 = this.series[1];
                    setInterval(function () {
    
                    $.getJSON('http://10.175.129.10/output_file.json', function(data) 
                {
                pp_time_offset_value =`${(data[0].pp_time_offset )}`
                var par = parseInt(pp_time_offset_value);
    
                time_offset_value =`${(data[0].time_offset )}`
                var par2 = parseInt(time_offset_value);
    
                        var x = (new Date()).getTime(); // current time
                         //y = par;#
    
                        <!-- y= Math.random() * (500 - 200) + 200 -->
                        series.addPoint([x, par], true, true);
                        series1.addPoint([x,par2], true, true);
                        console.log( par2);
                        });
                    }, 1000);
                }
            }
        },
    

    【讨论】:

    • 欢迎您,请检查您的答案是否已接受,以便其他人可以专注于仍然需要回答的问题。
    • 谢谢。我试过了,但我收到一条错误消息,说我不能再接受 2 天的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-16
    • 1970-01-01
    • 2017-12-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多