以下代码(从相关问题的answer构建)在悬停系列而不使用较重的series.update
方法时,更改了Highcharts折线图中的线条颜色,但是该代码行应还要更改datalabels文本颜色是否损坏。
如何获得期望的结果?
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]
}],
});
答案 0 :(得分:1)
要更改数据标签颜色,您必须使用css()
方法为标签文本元素设置新的填充样式。
代码:
point.dataLabel.text.css({ fill: "rgb(255,0,0)" });
演示:
API参考: