Highcharts多饼图系列悬浮图

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.netBlackLabelxm7gc5u6。

API参考。 https:/api.highcharts.comclass-referenceHighcharts.Point#setState。