事件重绘调用setTitle方法,我用方法更新数据:
donutChart.series[0].setData(donutSeries);
图表的大小增加。我不需要这样的行为,但我需要动态更改标题。
var chart;
$(function() {
$('#ebtDonutChart1').highcharts({
chart: {
type: 'pie',
events: {
load: function() {
var total = 0;
chart = this;
var items = chart.series[0].data;
for (var i = 0; i < items.length; i++) {
total += items[i].y;
}
chart.setTitle({
text: "<b>" + total.toString() + "</b>" + "<br/>" + " M €",
align: 'center',
verticalAlign: 'middle',
y: 15,
style: {
color: '#666666',
fontSize: '35px'
}
});
}
}
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 1]
],
states: {
hover: {
halo: {
size: 0
}
}
}
}]
});
$("#button").click(function(e) {
chart.series[0].setData([
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 1]
]);
var total = 0;
var items = chart.series[0].data;
for (var i = 0; i < items.length; i++) {
total += items[i].y;
}
chart.setTitle({
text: "2",
align: 'center',
verticalAlign: 'middle',
y: 15,
style: {
color: '#666666',
fontSize: '35px'
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Button</button>
<div id="ebtDonutChart1"></div>