show/hide series 消失了 datalable 的样式
show/hide series vanishes styling of datalable
在我的图表中,我将 class 与每个系列的数据标签组合在一起。
在某些时候,我隐藏了一个系列的数据表。但是如果现在我 show/hide 任何其他系列,隐藏的数据标签就会出现。
我做了一个jsfiddle例子。执行以下步骤看看我的意思:
1. 点击按钮 1 隐藏 series1
上的数据标签
2.隐藏系列2
现在系列 1 的数据标签出现了。我怎样才能阻止这种行为?
jsfiddle link: http://jsfiddle.net/jmogexfj/2/
$(function () {
button1();
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
return '<div class="label_'+this.series._i+'">' + this.y + '</div>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
data: [10.9, 50.5, 60.4, 100.2, 104.0, 106.0, 120.6, 108.5, 106.4, 104.1, 90.6, 50.4]
}]
});
});
function button1(){
$("#b1").click(function(){
$(".label_0").toggle();
});
}
这就是 Highcharts 库的工作原理。当您更新图表(如按图例隐藏、调整 window 浏览器大小等)时,元素将被重新绘制。
要隐藏数据标签,请使用 series.update()
:
$('#container').highcharts().series[0].update({
dataLabels: {
enabled: false
}
});
演示:http://jsfiddle.net/jmogexfj/4/
如果确实需要用类,那就用chart.events.redraw
to show/hide dataLabel on each redraw: http://jsfiddle.net/jmogexfj/5/
Highcharts 示例:
chart: {
events: {
redraw: function () {
var showOrHide = display ? 'show' : 'hide';
$(".label_0")[showOrHide]();
}
}
},
点击按钮:
function button1() {
$("#b1").click(function () {
display = !display;
$(".label_0").toggle();
});
}
在我的图表中,我将 class 与每个系列的数据标签组合在一起。 在某些时候,我隐藏了一个系列的数据表。但是如果现在我 show/hide 任何其他系列,隐藏的数据标签就会出现。
我做了一个jsfiddle例子。执行以下步骤看看我的意思:
1. 点击按钮 1 隐藏 series1
上的数据标签
2.隐藏系列2
现在系列 1 的数据标签出现了。我怎样才能阻止这种行为?
jsfiddle link: http://jsfiddle.net/jmogexfj/2/
$(function () {
button1();
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
return '<div class="label_'+this.series._i+'">' + this.y + '</div>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
data: [10.9, 50.5, 60.4, 100.2, 104.0, 106.0, 120.6, 108.5, 106.4, 104.1, 90.6, 50.4]
}]
});
});
function button1(){
$("#b1").click(function(){
$(".label_0").toggle();
});
}
这就是 Highcharts 库的工作原理。当您更新图表(如按图例隐藏、调整 window 浏览器大小等)时,元素将被重新绘制。
要隐藏数据标签,请使用 series.update()
:
$('#container').highcharts().series[0].update({
dataLabels: {
enabled: false
}
});
演示:http://jsfiddle.net/jmogexfj/4/
如果确实需要用类,那就用chart.events.redraw
to show/hide dataLabel on each redraw: http://jsfiddle.net/jmogexfj/5/
Highcharts 示例:
chart: {
events: {
redraw: function () {
var showOrHide = display ? 'show' : 'hide';
$(".label_0")[showOrHide]();
}
}
},
点击按钮:
function button1() {
$("#b1").click(function () {
display = !display;
$(".label_0").toggle();
});
}