我在高级图表中添加了一些标签，当点击按钮时需要将其销毁，但不幸的是标签仍然可见
这是小提琴。
https://jsfiddle.net/7pq3po3o/3/
HTML：
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="remove">
REmove callouts
</button>
Javascript： -
$(document).ready(function(){
remove_labels = false
gen_points = {"0":[{"x_axis":"0.8","y_axis":"09/07/2016 00:00","point":"0","callout":"called out","y_axis_position":""}]}
var drawchart = function() {
categories = ["09/07/2016 00:00","09/07/2016 00:01","09/07/2016 00:02","09/07/2016 00:03","09/07/2016 00:04"]
rate_1 = [0.8,0.54,0.6,0.3,0.4]
rate_2 = [0.33,0.16,0.33,0.3,0.38]
rate_3 = [0.03,0.04,0.05,0.03,0.01]
var addCallout = function(chart) {
console.log('redraw called')
var xAxis;
var yAxis;
if (Object.keys(gen_points).length === 0) {
// alert('empty object')
}
else{
for (var key in gen_points){
console.log('******generate callouts******* == ')
xAxis = chart.xAxis[0]
yAxis = chart.yAxis[0]
gen_points[key].forEach(function(obj,index){
point_val = gen_points[key][index]['point']
callout = gen_points[key][index]['callout']
series = chart.series[parseInt(key)]
point = series.data[parseInt(point_val)];
console.log('gen_points == ', gen_points)
console.log('xAxis == ', xAxis)
console.log('yAxis == ', yAxis.toPixels)
console.log('series == ', series)
console.log('point == ', point)
console.log('point plotX == ', point.plotX)
console.log('chart.plotLeft == ', chart.plotLeft)
console.log('xAxis == ', point.plotX + chart.plotLeft)
console.log('point plotY == ', point.plotY)
console.log('chart.plotTop == ', chart.plotTop)
console.log('yAxis == ', point.plotY + chart.plotTop)
if (remove_labels){
console.log(chart.renderer.label)
var a = chart.renderer.label('<div class="callout top">'+callout+'</div>',
point.plotX + chart.plotLeft + 10,
point.plotY + chart.plotTop - parseInt(y_axis_position), 'callout',null, null, true).destroy();
alert('destroy')
console.log('a',a);
}else{
var a = chart.renderer.label('<div class="callout top">'+callout+'</div>', point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop - 30, 'callout',null, null, true).add();
console.log('a',a);
}
})
}
}
};
$('#container').highcharts({
chart: {
// type: 'bar',
events: {
load: function() {
// alert('load')
addCallout(this);
},
redraw: function() {
// alert('redraw')
addCallout(this);
},
}
},
title: {
text: 'Spikes Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
}
,
series: [{
turboThreshold: 2000 // to accept point object configuration
}],
xAxis: {
categories: categories,
tickInterval: 60,
},
yAxis: {
title: {
text: 'Error Rate'
},
min: 0,
max: 5,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels:{
format : '{value} %'
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
// {turboThreshold: 2000 },
{
name: 'Rate-1',
data: rate_1,
turboThreshold: 2000,
lineWidth: 1,
dataLabels: {
enabled: true,
useHTML: true,
style: {
fontWeight: 'bold'
},
},
}, {
name: 'Rate-2',
data: rate_2,
turboThreshold: 2000,
lineWidth: 1
}, {
name: 'Rate-3',
data: rate_3,
turboThreshold: 2000,
lineWidth: 1
}
]
});
};
drawchart()
$('#remove').on('click', function(){
console.log('remove clicked')
remove_label = true
$("#container").highcharts().redraw()
console.log('redraw complete')
})
})
答案 0 :(得分：1)
为什么你不能使用.remove（）方法？它将帮助您处理图表：
$('#remove').on('click', function() {
remove_label = true
$('.callout').remove();
})
在这里你可以看到一个如何工作的例子： https://jsfiddle.net/7pq3po3o/6/