如何动态添加多个系列并动态更新其数据

Question

我的任务是动态添加系列并继续更新其数据，这些数据由ajax调用接收。 我知道可以通过声明highchart funciton global来动态添加系列。 并使用series.addseries（）函数，还可以通过使用settimout请求对Ajax调用进行更新来更新数据，并可以通过使用series.addpoint（）函数来更新点。

我分别完成了这两项工作。 但是，当我结合这两种技术时，数据不会添加到图表中。 我对此进行了大量研究，但没有找到不添加数据的理由。 实际上脚本会挂起浏览器。 我已经检查了系列对象，该对象显示x数据和y数据已处理。 我发现的唯一区别是isDirty字段和isDirtydata字段设置为true。 不知道原因。 这是完整的代码

var serverUrl = 'http://'+window.location.hostname+':8000'
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
data={}
$(document).ready(function(){

    $(function () {
        console.log("highcharts")
         $('#first').highcharts({
              chart: {
                  type: 'spline',
                  //marginRight: 150,
                  marginBottom: 5,
                  events: {
                      load: requestData(data)
                          }
              },
              title: {
                  text: 'Server Monitroting Tool'
              },
              subtitle: {
                  text:  'Cpu usage, Memory Usage,Disk Usage,Mongo Usage'
              },
              xAxis: {
              type: 'datetime',
              categories: ['TIME'],
                    dateTimeLabelFormats : {
                    hour: '%I %p',
                    minute: '%I:%M %p'
                }
              },
              yAxis:{
                  showEmpty:false
              },

                  legend:
                  {
                    backgroundColor: '#F5F5F5',
                    layout: 'horizontal',
                    floating: true,
                    align: 'left',
                    verticalAlign: 'bottom',
                    x: 60,
                    y: 9,
                    shadow: false,
                    border: 0,
                    borderRadius: 0,
                    borderWidth: 0
              },
              series: {}
          });
          });
     from_date=new Date().getTime()-60000;

    function requestData(data)
    {
        if(!data)
        {
            console.log("default ")
        }
        else
        {
        console.log("requesting")
        $.ajax({
            url:serverUrl+'/api/fetch_params/',
            type:'GET',
            data:data,
            success:function(response)
            {
             console.log("in success")
            //data = {'type':TypeOfParameter,'hostname':hostname,'sub-type':sub_type,'param':sub_type_parameter,'from-date':from_date}
            var id=data['sub-type']+data['param']
            var series = chart.get(id)
            shift = series.data.length > 100; // shift if the series is longer than 300 (drop oldest point)

            response= $.parseJSON(response)
            var x=data['sub-type']
            all_data=response.response.data[x]

    //                console.log(new Date(from_date),'latest timestamp')
                console.log(series)
            console.log("data",all_data)

            from_date=all_data[all_data.length-1][0]
//            console.log(from_date)
//                series.isDirty=false
//                series.isDirtyData=false
            for (var i = 0; i < all_data.length; i++)
            {
                series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
            }
            console.log("series object",series)
    //                    chart.redraw();
                console.log(" parameter",data)
                data['from-date']=from_date

            console.log("data",series.data)
    //                console.log(chart)
            setTimeout(requestData(data), 10000);
            console.log("out of success")
            },

            cache:false,
            error:function()
            {
                console.log("err")

            }
        });
        }

    }

    $.ajax({
        url:serverUrl+'/api/fetch_all_servers/',
        type:'GET',
        success:function(response){
            response = $.parseJSON(response)
            sd = response.response.all_servers
            $('input[name=select_menue]').optionTree(sd)
        },
        error:function(){
            console.log('error')
        }
    });

    $('.param-button').live('click',function(e){
        e.stopPropagation()
    })

    $('param-select').live('hover',function(){
       $(this).find('.type-select').show()
    });

    $('.final_value').live('change',function(){
        select_name = 'select_menue_'
        param_list = []
        var param=$('select[name="'+select_name+'"] option:selected').attr('value')
        while(param){
            param_list.push(param)
            select_name += '_'
            var param=$('select[name="'+select_name+'"] option:selected').attr('value')
        }
        console.log(param_list,"param_list")
        from_date=new Date().getTime()-300000  //5 minute data
        hostname=param_list[0]
        TypeOfParameter= param_list[1]
        sub_type_parameter=param_list[param_list.length-1]
        data = {'type':TypeOfParameter,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date}
        var sub_type;
        if(param_list.length==4){
            sub_type=param_list[2]
            data['sub-type'] = sub_type
        }
        else
        {
            sub_type=sub_type_parameter
        }
//        console.log(hostname,TypeOfParameter,sub_type,sub_type_parameter)

       data = {'type':TypeOfParameter,'hostname':hostname,'sub-type':sub_type,'param':sub_type_parameter,'from-date':from_date}
       requestData(data)

        $('#loadingmessage').show();  // show the loading message.


        chart = $('#first').highcharts();

        if(TypeOfParameter=='cpu')
        {
            console.log("adding axis")
             chart.addAxis({ // Primary yAxis


                          id:'Cpu_axis'+sub_type_parameter,
                          labels: {
                              formatter: function() {
                                  return this.value;
                              },
                              style: {
                                  color: '#89A54E'
                                  }
                          },
                          title: {
                              text: "core "+ sub_type+ " "+sub_type_parameter,
                              style: {
                                  color: '#89A54E'
                              }
                          },

            lineWidth: 1,
            lineColor: '#08F'

                      });



         console.log("adding series")
        chart.addSeries({
            id:sub_type+sub_type_parameter,
            name: "core "+sub_type+" "+sub_type_parameter,
            data :[],

            tooltip : {
                valueSuffix: ' %'
                    },
                 yAxis:'Cpu_axis'+sub_type_parameter
                })
            console.log("series out")


        }
        if(TypeOfParameter=='memory')
        {
            chart.addAxis    ({
            id:'memory'+sub_type_parameter,
            labels:{
                     formatter: function() {
                                  return this.value +'%';
                              },
                      style: {
                          color: '#89C54F'
                          }
                    },

            title: {
                text:sub_type+" "+sub_type_parameter
            },
            lineWidth: .5,
            lineColor: '#08F',
            opposite: true
        });
        chart.addSeries({
            id:sub_type+sub_type_parameter,
            name: sub_type+'memory usage',
            data: [],
            tooltip: {
        valueSuffix: '%'
                },
          yAxis:'memory'+sub_type_parameter
        });
        }

     if(TypeOfParameter=='disk')
        {
            chart = new Highcharts.Chart({
            chart: {
                renderTo: 'second',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {

                text: 'disk Usage'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'disk',
                    margin: 80
                }
            },
            series: [{
                id:sub_type+sub_type_parameter,
                name: 'disk',
                data: []
            }]
});
        }
     if(TypeOfParameter=='db')
        {
            chart = new Highcharts.Chart({
            chart: {
                renderTo: 'second',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'mongo Usage'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'mmongo',
                    margin: 80
                }
            },
            series: [{
                id:sub_type+sub_type_parameter,
                name: 'mongo',
                data: []
            }]
});
        }
     if(TypeOfParameter=='redis')
        {
            chart = new Highcharts.Chart({
            chart: {
                renderTo: 'second',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'redis Usage'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'redis',
                    margin: 80
                }
            },
            series: [{
                id:sub_type+sub_type_parameter,
                name: 'redis',
                data: []
            }]
    });
                    }
                $('#loadingmessage').hide(); // hide the loading message




        }
            )
            });

我在这个问题上停留了很长时间。 仍然无法找出解决方案。 这是完整的代码链接，请有人帮助。 感到沮丧.. :-(

Answer 1

如您所知，当处理大量点时，addPoint方法有点危险。 建议在处理许多新点时禁用每点重绘-更多信息http://api.highcharts.com/highcharts#Series.addPoint（） ，我注意到您已经在loop语句中这样做了，但是为什么这样做你评论了吗？ 您是否尝试过再次启用。 通过添加新的重绘图表事件并确保警报或控制台日志来确保chart.redraw正常运行。

另外，您可以尝试在下面作为ajax的一部分，而不是使用cache：false。 我过去有一些问题。 标头：{'Cache-Control'：'no-cache'}

干杯