javascript addpoint 不是在 highcharts 中添加点，数据是用 ajax 动态更新的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17975117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
addpoint is not adding point in highcharts ,where data is updated dynamically with ajax
提问by jugadengg
my task is to add multiple series dynamically and update series data dynamically. my data is loaded with ajax request.
我的任务是动态添加多个系列并动态更新系列数据。我的数据加载了 ajax 请求。
i have used the logic given on highcharts side to update the data dynamically. but addpoint is not adding points to series dont know why, when i checked the series object, it has data but dirtyfiled is set to true (dont know the reason)
我已经使用 highcharts 端给出的逻辑来动态更新数据。但是 addpoint 没有向系列添加点 不知道为什么，当我检查系列对象时，它有数据但是dirtyfiled 设置为 true（不知道原因）
code given below is used to load data dynamically. here problem is add point, it is not adding data to graph. series object is showing isDirty :true isDirtyData:true.
下面给出的代码用于动态加载数据。这里的问题是添加点，它不是向图形添加数据。系列对象显示 isDirty :true isDirtyData:true。
i think this isDirty has something to deal with. please help me out. facing this problem for quite a long time .
我认为这是肮脏的事情要处理。请帮帮我。面对这个问题很久了。
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 ")
}
below functin is used to draw highchart,here onload event is used to load data dynamically.
下面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();
this is the code to add axis dynamically.
这是动态添加轴的代码。
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")
}
回答by Oleksandr Horobets
I can see it is old question of 2013 year. But there are my thoughts for other guys that look for the answer on this question now.
我可以看到这是 2013 年的老问题。但是，我对现在正在寻找这个问题答案的其他人有一些想法。
There is highcharts.js bug https://github.com/highcharts/highcharts/issues/3452. In short the bug description is: when point is added with addPoint() method to chart series then this new point doesn't appear in someSerie.data array.
有 highcharts.js 错误https://github.com/highcharts/highcharts/issues/3452。简而言之，错误描述是：当使用 addPoint() 方法将点添加到图表系列时，这个新点不会出现在 someSerie.data 数组中。
I propose following workaround for this issue "new points aren't present in someSerie.data array" :
我针对这个问题提出以下解决方法“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);
After that following check :
之后进行以下检查：
if(series.data.length) {
chart.redraw();
}
should work OK.
应该可以正常工作。
回答by Pawe? Fus
Well, it's about how you are using addPoint()function:
嗯，这是关于你如何使用addPoint()函数：
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
You have set redraw = false, so it won't redraw chart. Set it to true, and will work.
您已设置 redraw = false，因此它不会重绘图表。将其设置为 true，将起作用。
More about: http://api.highcharts.com/highcharts#Series.addPoint()
更多信息：http: //api.highcharts.com/highcharts#Series.addPoint()
