Highcharts无法摧毁标签 [英] Highcharts unable to destroy labels
本文介绍了Highcharts无法摧毁标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我添加了一些标签，当点击一个按钮时需要销毁，但不幸的是标签仍然可见。
这是小提琴。 >
https://jsfiddle.net/7pq3po3o/3/
HTML：
< script src =https ：//code.highcharts.com/highcharts.js>< /脚本>
< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>
< button id =remove>
撤销标注
< / 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：call out，y_axis_position：}]}
varchart = function（）{
categories = [2016-09-07 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 =函数（图表）{
console.log（ 'redraw called'）
var xAxis;
var yAxis;
if（Object.keys（gen_points）.length === 0）{
// alert（'empty object '）
}
else {
（gen_points中的var键） {
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（{
图表：{
// type：'bar'，
events：{
load ：function（）{
// alert（'load'）
addCallout（this）;
}，
redraw：function（）{
// alert（ '重绘'）
addCallout（this）;
}，
}
}，
title：{
text：'Spikes Graph'，
x：-20 // center
}，
字幕：{
text：''，
x：-20
}
，
系列：[{
turboThreshold：2 000 //接受点对象配置
}]，
xAxis：{
类别：类别，
tickInterval：60，
}，
yAxis： {
title：{
text：'Error Rate'
}，
min：0，
max：5，
plotLines：[{
value：0，
width：1，
color：'＃808080'
}]，
labels：{
format：'{value}％'
}
}，
工具提示：{
valueSuffix：'°C'
}，
图例：{
layout：'vertical'，
align：'right'，
verticalAlign：'middle'，
borderWidth：0
}，
series：[
// {turboThreshold：2000}，
{
名称：'Rate-1'，
data：rate_1，
turboThreshold：2000，
lineWidth：1，
dataLabels：{
enabled：true，
useHTML：true，
style：{
fontWeight：'bold'
}，
}，
}，{
名称：'Rate-2'，
数据：rate_2，
turboThreshold：2000，
lineWidth：1
}，{
名称：'Rate-3'，
data：rate_3，
turboThreshold：2000，
lineWidth：1
}
]
}）;
}; $（b）
$ b drawchart（）
$（'＃remove'）。on（'click'，function（）{
console.log（'remove clicked'）
remove_label = true
$（＃container）。highcharts（）。redraw（）
console.log（'redraw complete'）
}）
}）
解决方案
.remove（）方法？它会帮助你的图表：
$（'＃remove'）。on（'click'，function（）{
remove_label = true
$（'。callout'）。remove（）;
}）
您可以在此处看到一个示例：
https：/ /jsfiddle.net/7pq3po3o/6/
I have added some labels to highcharts that needs to be destroyed when a button is clicked but unfortunately the labels are still visible
Here is the fiddle.
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')
})
})
解决方案
Why you can't use .remove() method? It will help you with your chart:
$('#remove').on('click', function() {
remove_label = true
$('.callout').remove();
})
Here you can see an example how it can work: https://jsfiddle.net/7pq3po3o/6/
这篇关于Highcharts无法摧毁标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
