悬停时更改HighCharts图表中的datalabels颜色,而无需更新序列 [英] change datalabels color in a HighCharts chart when hovering without updating the series
本文介绍了悬停时更改HighCharts图表中的datalabels颜色,而无需更新序列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下代码(从相关问题的答案构建)在以下情况下更改了Highcharts折线图中的线条颜色将鼠标悬停在系列上而不使用更重的series.update
方法,但是应该更改datalabels文本颜色的代码行也已损坏.
如何获得期望的结果?
The following code (built from the answer of a related question) changes the line color in a Highcharts line chart when hovering the series without using the heavier series.update
method, but the code line which should change also the datalabels text color is broken.
How can I achieve the desidered result?
Highcharts.chart('container', {
plotOptions: {
series: {
dataLabels: {
enabled: true
},
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
}
},
pointStart: 2010,
events: {
mouseOver: function() {
this.graph.attr({
stroke: "rgb(255,0,0)"
});
this.points.forEach(p => {
p.graphic.attr({
fill: "rgb(255,0,0)"
});
p.dataLabel.options.color="rgb(255,0,0)"
//the above line is broken
}
);
},
mouseOut: function() {
this.graph.attr({
stroke: this.color
});
this.points.forEach(p => p.graphic.attr({
fill: this.color
}));
}
}
},
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
在 JSfiddle
推荐答案
要更改数据标签颜色,您必须使用css()
方法为标签文本元素设置新的填充样式.
To change data label color you have to set a new fill style for the label text element using css()
method.
代码:
point.dataLabel.text.css({ fill: "rgb(255,0,0)" });
演示:
API参考:
这篇关于悬停时更改HighCharts图表中的datalabels颜色,而无需更新序列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文