我的任务是动态添加多个系列并动态更新系列数据。我的数据加载了 ajax 请求。
我已经使用 highcharts 端给出的逻辑来动态更新数据。但是 addpoint 没有向系列添加点不知道为什么，当我检查系列对象时，它有数据但dirtyfiled 设置为true（不知道原因）
下面给出的代码用于动态加载数据。这里的问题是添加点，它不是向图形添加数据。系列对象显示 isDirty :true isDirtyData:true。
我认为这 isDirty 有一些事情要处理。请帮帮我。面对这个问题已经很久了。
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();
这是动态添加轴的代码。
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")
}