高图多个饼图系列悬停

Question

我正在使用Highcharts创建两个饼图，每个图表中的键相同，但数据不同。我的选项对象如下所示：

const chartOptions = {
chart: {
type: 'pie'
},
legend: {
enabled: false
},
tooltip: {
enabled: true,
},
plotOptions: {
pie: {
borderWidth: 0,
cursor: 'pointer'
},
series: {
states: {
hover: {
enabled: true
}
}
}
},
series: [
{
name: 'Chart One',
colorByPoint: true,
size: '50%',
center: ['25%', '50%'],
data: [
{color: '#000000', name: 'One', y: 43},
{color: '#666666', name: 'Two', y: 12},
{color: '#cccccc', name: 'Three', y: 54},
]
},
{
name: 'Chart Two',
colorByPoint: true,
size: '50%',
center: ['75%', '50%'],
data: [
{color: '#000000', name: 'One', y: 32},
{color: '#666666', name: 'Two', y: 78},
{color: '#cccccc', name: 'Three', y: 11},
]
}
]
};

这几乎按预期工作。但我不能让一件事起作用。

在柱形图上，当您有多个序列并将鼠标悬停在序列 A 中的一个点上时，其他序列中的相应点也会亮起(其他点将变暗(。但不是在饼图中。当我将鼠标悬停在"图表一"中的"三"时，"图表二"中的"三"没有突出显示。

有可能以某种方式做到这一点吗？

Answer 1

在mouseOver回调函数中，您可以找到相关点并对其调用setState('hover')：

plotOptions: {
...,
series: {
point: {
events: {
mouseOver: function() {
var relatedPoints = [],
series = this.series,
pIndex = this.index;
series.chart.series.forEach(function(s) {
if (s !== series) {
relatedPoints.push(s.points[pIndex]);
}
});
relatedPoints.forEach(function(p) {
p.setState('hover');
});
}
}
}
}
}

---

现场演示：http://jsfiddle.net/BlackLabel/xm7gc5u6/

API 参考：https://api.highcharts.com/class-reference/Highcharts.Point#setState