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

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

这两项工作我都分别做了。但当我结合这两种技术时，数据不会添加到highchart中。我对此做了很多研究，我没有找到不添加数据的理由。影响脚本挂起浏览器。 我已经检查了series对象，它显示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




        }
            )
            });

var serverUrl='http://'+window.location.hostname+'：8000'
Highcharts.setOptions({
全球：{
useUTC:false
}
});
数据={}
$（文档）.ready（函数（）{
$（函数（）{
控制台日志（“高图表”）
$（“#第一”）。高图({
图表：{
类型：“样条线”，
//marginRight:150，
marginBottom:5，
活动：{
加载：请求数据（数据）
}
},
标题：{
文本：“服务器监视工具”
},
副标题:{
文本：“Cpu使用率、内存使用率、磁盘使用率、Mongo使用率”
},
xAxis：{
键入：“日期时间”，
类别：[“时间”]，
日期时间标签格式：{
小时：'%I%p'，
分钟：“%I:%M%p”
}
},
亚克斯：{
showEmpty:错误
},
图例：
{
背景颜色：'#f5'，
布局：“水平”，
浮动：是的，
对齐：“左”，
垂直排列：“底部”，
x:60，
y:9，
影子：错，
边界：0，
边界半径：0，
边框宽度：0
},
系列：{}
});
});
from_date=new date（）.getTime（）-60000；
函数请求数据（数据）
{
如果（！数据）
{
console.log（“默认值”）
}
其他的
{
console.log（“请求”）
$.ajax({
url:serverUrl+'/api/fetch_params/'，
类型：'GET'，
数据：数据，
成功：功能（响应）
{
console.log（“成功登录”）
//数据={'type'：typeof参数，'hostname'：主机名，'sub-type'：sub_-type，'param'：sub_-type_参数，'from-date'：from_-date}
变量id=数据['sub-type']+数据['param']
var series=chart.get（id）
shift=series.data.length>100；//如果序列长度超过300，则shift（删除最早的点）
response=$.parseJSON（响应）
var x=数据[“子类型”]
all_data=response.response.data[x]
//log（新日期（从_日期），'latest timestamp'）
console.log（系列）
console.log（“数据”，所有_数据）
from_date=所有_数据[所有_数据.长度-1][0]
//console.log（从\u日期开始）
//series.isDirty=false
//series.isDirtyData=false
对于（变量i=0；i