当鼠标悬停在饼图中的一个切片上时,我正在尝试设置相应图例项的样式。我可以使用以下plotOptions更新整个图例(所有图例项)的样式:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
this.series.chart.legend.update({
itemStyle: {
fontWeight: "bold",
},
});
},
mouseOut: function () {
this.series.chart.legend.update({
itemStyle: {
fontWeight: "normal",
},
});
},
},
},
},
},
字符串
那么,我如何访问单个项目的CSS呢?
2条答案
按热度按时间zqdjd7g91#
您可以使用从点到图例项的引用。例如:
this.legendItem.label
字符串
现场演示:https://jsfiddle.net/BlackLabel/4tevkco0/
**API引用:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#css
balp4ylt2#
单独更改一个标签的一种方法是使用事件设置用户选项,然后在标签格式中使用该选项将其与其他标签区分开来。
例如,在事件中,我们设置
hovering: true
或hovering: false
。然后在格式化程序中,我们在标签名称周围应用单独的HTML来区分它,如<b>
,或者您可能会使用<span>
与样式。请参见以下示例(or this JSFiddle demonstration):
字符串