[英]Highchart - Add dynamic data to the bar
I am using the bar chart. 我正在使用条形图。 I want to add the new bar in the existing bar chart which is already drawn.
我想在已经绘制的现有条形图中添加新条形。
How to do that? 怎么做? I have used the following
我已经使用以下
chartObject.series[i].addPoint(99, true);
But didn't get the result. 但是没有得到结果。 It's automatically add the value with the default label name.
它会自动添加带有默认标签名称的值。
I want to insert the E bar with the value under A . 我想将E栏插入A下的值 。 How can I do that?
我怎样才能做到这一点?
chartObject = Highcharts.chart('chartContainer', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ["A", "B", "C", "D"],
title: {
text: null
}
},
yAxis: {
min: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
debugger
for (var i = 0; i < chartObject.series.length; i++) {
chartObject.series[i].addPoint(99, true);
}
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
},
showInLegend: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
showInLegend: false,
data: [
50,
35,
25,
80
]
}]
});
Please refer to this jsfiddle: http://jsfiddle.net/kkulig/rhneon2q/ 请参考以下jsfiddle: http : //jsfiddle.net/kkulig/rhneon2q/
I think that one of the convenient ways to do this is to move categories definitions to name properties of points: 我认为实现此目的的便捷方法之一是将类别定义移至点的名称属性:
data: [
{y: 50, name: 'A'},
{y: 35, name: 'B'}
]
and change xAxis type to category: 并将xAxis类型更改为category:
type: 'category'
It's explained here: http://api.highcharts.com/highcharts/xAxis.categories 此处说明: http : //api.highcharts.com/highcharts/xAxis.categories
Then you can update chart with new point just like that: 然后,您可以像这样用新的点更新图表:
UPDATE: 更新:
Code: 码:
chartObject.series[i].addPoint({y: this.y, name: 'E'}, true);
Adds new point with category on the end of a serie. 在意甲末尾添加带有类别的新点。
If you wan't new point with category to appear after the clicked one, you can use this code: 如果您不想在单击的类别后出现带有类别的新点,则可以使用以下代码:
var data = chartObject.userOptions.series[i].data.slice(); // clone original userOptions
data.splice(this.index + 1, 0, {
y: 10,
name: "New cat. " + (chartObject.series[i].data.length - 2) // 2 - initial categories number
});
chartObject.series[i].update({
data: data
});
END OF UPDATE 更新结束
Unfortunately if you set categories like you did before: 不幸的是,如果您像以前那样设置类别:
categories: ["A", "B", "C", "D"]
name property of added point won't be used as category. 添加点的name属性不会用作类别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.