addpoint并不是highcharts中的添加点,在highchart中,数据是用ajax动态更新的

addpoint is not adding point in highcharts ,where data is updated dynamically with ajax

本文关键字:ajax 动态 更新 数据 highchart 添加 并不是 addpoint highcharts      更新时间:2023-09-26

我的任务是动态添加多个系列并动态更新系列数据。我的数据是用ajax请求加载的。

我已经使用了图表中给出的逻辑来动态更新数据。但是addpoint并不是在序列中添加点。不知道为什么,当我检查序列对象时,它有数据,但dirtyfield被设置为true(不知道原因)

下面给出的代码用于动态加载数据。这里的问题是添加点,而不是将数据添加到图中。series对象显示isDirty:trueisDirtyData:true。

我觉得这是肮脏的事。请帮帮我。长期面临这个问题。

from_date=new Date().getTime()-60000;
        function requestData ()
                          {
                              console.log("into request data")
                              console.log(TypeOfParameter,sub_type,sub_type_parameter,hostname,from_date)
                              $.ajax({
                                  url:serverUrl+'/api/fetch_params/',
                                  type:'GET',

                                  data:{'type':TypeOfParameter,'sub-type':sub_type,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date},
                                  success:function(response)
                                  {
                                   console.log("into success")
                                  var id=sub_type+sub_type_parameter
                                  var series = chart.get(id)
                                  shift = series.data.length > 150; // shift if the series is longer than 300 (drop oldest point)
                                   console.log(shift)
                                      response= $.parseJSON(response)
                                      var x=sub_type;
                                      all_data=response.response.data[x]
                                      itemdata=[]//
                                      console.log(all_data.length)
                                      //console.log(new Date(all_data[all_data.length-1][0]),'latest timestamp')
                                      from_date=all_data[all_data.length-1][0]
//                                      series.addPoint(all_data,false,shift);
                                       console.log("series name:",series.data.length,series.name)
                                      for (var i = 0; i < all_data.length; i++)
                                      {
                                         console.log(all_data[i][0],all_data[i][1]);
                                          series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
                                      }
                                      console.log(series,"object")
                                      console.log("hey",series.data.length)
                                      console.log("hey",series.data.length )
                                      console.log(series.data)
                                       console.log("out of success")
                                      //chart.redraw();
                                  setTimeout(requestData, 60000);

                                  },
                                  cache:false,
                                  error:function()
                                  {
                                      console.log("err")
                                  }
                              });
                            console.log("out of request ")
                          }

下面的functin用于绘制highchart,这里的onload事件用于动态加载数据。

                       $(function (
) {
                               console.log("into highcharts")
                                 chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            defaultSeriesType: 'spline',
                            events: {
                                load: requestData
                            }
                        },
                        title: {
                            text: 'cpu Usage'
                        },
                        xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 150,
                            maxZoom: 20 * 1000
                        },
                        yAxis: {
                            minPadding: 0.2,
                            maxPadding: 0.2,
                            title: {
                                text: 'Value',
                                margin: 80
                            }
                        },
                        series: [{
                            id:sub_type+sub_type_parameter,
                            name: 'CPU',
                            data: []
                        }]
    });;
                               console.log("out of highcharts")
                             });

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

这是动态添加axis的代码。

        var flag=true
                if(TypeOfParameter=='cpu'&&flag)
                {
                    console.log("entering into cpu",sub_type,flag)
//                    all_data = response.response.data[sub_type]
//                    itemdata=[]
//                    for(i in all_data)
//                    {
//                        itemdata.push(all_data[i][1])
//                    }
//                    console.log(itemdata[0])
//                    console.log("Drawing trend")

                     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'
                          });

                    chart.addSeries({
                            id:sub_type+sub_type_parameter,
                            name: "core "+sub_type+" "+sub_type_parameter,
                            data:[],
                            tooltip: {
                                valueSuffix: ' q    %'
                                    },
                                 yAxis:'Cpu_axis'+sub_type_parameter
                                })
                              //chart.redraw();
                    flag=false
                    console.log("returning from cpu")
                    } 

我可以看出这是2013年的老问题。但我对其他正在寻找这个问题答案的人有一些想法。

存在highcharts.js错误https://github.com/highcharts/highcharts/issues/3452.简而言之,错误描述是:当用addPoint()方法将点添加到图表序列中时,这个新点不会出现在someSerie.data数组中。

针对"someSerie.data数组中不存在新点"的问题,我提出了以下解决方法:

// after adding new point with addPoint() method
let min = chart.xAxis[0].getExtremes().min;
let max = chart.xAxis[0].getExtremes().max;
chart.zoomOut();
chart.xAxis[0].setExtremes(min, max);

在以下检查之后:

if(series.data.length) { 
    chart.redraw(); 
}

应该工作正常。

好吧,这是关于如何使用addPoint()函数:

 series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);

您已经设置了refresh=false,所以它不会重新绘制图表。设置为true,就会起作用。

更多关于:http://api.highcharts.com/highcharts#Series.addPoint()