我在Highcharts的传说中有自定义样式，效果很好。当我单击该项目时，我想应用其他样式来赋予禁用按钮印象。为此，我使用了计数器，即当计数器为偶数时，应应用活动样式，而在奇数计数器上应使用非活动样式。这不能正常工作，我想问题在于示波器。请在下面找到代码：
var clickCounter = 0;
Highcharts.chart('container', {
plotOptions: {
series: {
events: {
legendItemClick: function () {
clickCounter++;
return clickCounter;
}
},
showInLegend: true
}
},
legend: {
useHTML: true,
labelFormatter: function (clickCounter) {
if(clickCounter%2 == 0)
return '<span class="span-legend-active">' + this.name + '</span>'
else
return '<span class="span-legend-item-inactive">' + this.name + '</span>'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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: [11.9, 31.5, 78.4, 29.2, 44.0, 76.0, 95.6, 48.5, 116.4, 114.1, 35.6, 154.4]
}]
});.span-legend-active {
background-color: white;
border: 1px solid green;
/* border: none; */
color: black;
padding: 3px 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
}
.span-legend-item-inactive {
background-color: white;
border: 1px solid #cccccc;
color: #cccccc;
padding: 3px 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>任何帮助表示赞赏
我认为您不需要使用legendItemClick事件来执行此操作。您可以尝试通过以下方式更改CSS选择器：
.highcharts-legend-item > span > span {
(active style)
}
.highcharts-legend-item-hidden > span > span {
(inactive style)
}
您在此处修改的代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句