addpoint并不是highcharts中的添加点,在highchart中,数据是用ajax动态更新的
addpoint is not adding point in highcharts ,where data is updated dynamically with ajax
我的任务是动态添加多个系列并动态更新系列数据。我的数据是用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()
相关文章:
- Jquery Selected plugin - 由 Ajax 动态填充列表
- 使用 AJAX 动态持续加载内容
- 基于ajax动态定位列表项
- jCarousel通过Ajax动态加载内容
- 如何使用jQuery.ajax动态修改添加的html
- 使用下拉菜单的Ajax动态内容
- 使用JQuery通过ajax动态发送json格式的表单后数据
- 如何使用ajax动态添加类
- Jquery Chosen插件-通过Ajax动态填充列表时显示加载图标
- 使用Javascript、Jquery或Ajax动态插入Yahoo Merchant Store目录标签
- 使用php和ajax动态刷新表格
- 当通过ajax动态添加标记时,Wicket-IE8-Javascript事件侦听器不会执行
- PHP、MySQL 和 Ajax:动态显示默认数据、选择现有数据或添加新数据
- Yii:使用 ajax 动态加载新模型
- 使用 AJAX 动态更新谷歌地图
- 在使用 ajax 动态添加的 DOM 元素的点击上调用 JavaScript 函数
- 使用 ajax 动态刷新 jquery 数据表
- Ajax 动态选择表单未提交值
- JavaScript/Ajax动态更新WTForms选择字段
- 谷歌地图标记没有通过ajax动态显示