Highcharts:有没有办法在 PointHover 上突出显示系列对应的 y 轴?
Highcharts: Is there a way to highlight a series' corresponding y-axis onPointHover?
我目前在我的图表中使用多个 y 轴,如本例所示:https://jsfiddle.net/3Lsq2nzk/1/。在我的用例中,每个 y 轴只有一行的情况很少见,所以我想知道是否有一种方法可以突出显示与悬停的系列相对应的 y 轴。
因此,如果您存储之前悬停在系列的 y 轴上并重新呈现图表,则此方法有效,但这样做的性能非常糟糕。我还尝试在 onPointHover 中编辑 json,但无济于事。
使用这个 onPointHover 函数:
function onPointHover(e) {
e.target.color = 'red'
e.target.series.yAxis.userOptions.labels.style.color = "red"
}
可以更新点颜色,但不能更新 yAxis 颜色,尽管实际 json 正在控制台中更新
您可以通过遍历 series.yAxis.ticks
并更改其 CSS fill
属性 轻松实现它。检查下面发布的演示和代码。
代码:
function highlightSeries(series, color) {
for (var key in series.yAxis.ticks) {
series.yAxis.ticks[key].label.css({
fill: color
});
}
series.yAxis.axisTitle.css({
fill: color
});
}
...
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var point = this,
series = point.series,
highlightColor = 'red';
if (point.graphic) {
point.graphic.attr({
fill: highlightColor
});
}
series.chart.series.forEach(function(s) {
if (s.isHighlighted) {
highlightSeries(s, s.color);
s.isHighlighted = false;
}
});
highlightSeries(series, highlightColor);
series.isHighlighted = true;
}
}
}
}
}
演示:
API参考:
我目前在我的图表中使用多个 y 轴,如本例所示:https://jsfiddle.net/3Lsq2nzk/1/。在我的用例中,每个 y 轴只有一行的情况很少见,所以我想知道是否有一种方法可以突出显示与悬停的系列相对应的 y 轴。
因此,如果您存储之前悬停在系列的 y 轴上并重新呈现图表,则此方法有效,但这样做的性能非常糟糕。我还尝试在 onPointHover 中编辑 json,但无济于事。
使用这个 onPointHover 函数:
function onPointHover(e) {
e.target.color = 'red'
e.target.series.yAxis.userOptions.labels.style.color = "red"
}
可以更新点颜色,但不能更新 yAxis 颜色,尽管实际 json 正在控制台中更新
您可以通过遍历 series.yAxis.ticks
并更改其 CSS fill
属性 轻松实现它。检查下面发布的演示和代码。
代码:
function highlightSeries(series, color) {
for (var key in series.yAxis.ticks) {
series.yAxis.ticks[key].label.css({
fill: color
});
}
series.yAxis.axisTitle.css({
fill: color
});
}
...
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var point = this,
series = point.series,
highlightColor = 'red';
if (point.graphic) {
point.graphic.attr({
fill: highlightColor
});
}
series.chart.series.forEach(function(s) {
if (s.isHighlighted) {
highlightSeries(s, s.color);
s.isHighlighted = false;
}
});
highlightSeries(series, highlightColor);
series.isHighlighted = true;
}
}
}
}
}
演示:
API参考: