javascript - Highcharts 桑基。突出显示给定类别的所有路径

Question

在默认的 Highcharts Sankey 图表中，您可以将鼠标悬停在各个路径上，这些路径会突出显示。

我希望能够悬停在节点上 - 例如下面示例中的加拿大 - 并在悬停在该节点上时突出显示所有红色路径。

为了澄清，我仍然希望能够单独将鼠标悬停在它们上，但是当我将鼠标悬停在最左边的框(深红色部分)上时，我希望突出显示所有红色路径。

JSFiddle

series: [{
    keys: ['from', 'to', 'weight'],
    data: [
        ['Brazil', 'Portugal', 5 ],
        ['Brazil', 'France', 1 ],
        ['Brazil', 'Spain', 1 ],
        ['Brazil', 'England', 1 ],
        ['Canada', 'Portugal', 1 ],
        ['Canada', 'France', 5 ],
        ['Canada', 'England', 1 ],
        ['Mexico', 'Portugal', 1 ],
        ['Mexico', 'France', 1 ],
        ['Mexico', 'Spain', 5 ],
        ['Mexico', 'England', 1 ],
        ['USA', 'Portugal', 1 ],
        ['USA', 'France', 1 ],
        ['USA', 'Spain', 1 ],
        ['USA', 'England', 5 ],

    ],
    type: 'sankey',
    name: 'Sankey demo series'
}]

Answer 1

查看此现场演示:http://jsfiddle.net/kkulig/v79mb8eo/

我创建了更改给定节点中开始的所有链接点状态的函数:

function linksHover(point, state) {
  if (point.isNode) {
    point.linksFrom.forEach(function(l) {
      l.setState(state);
    });
  }
}

它在点的 mouseOver 和 mouseOut 事件上执行:

  plotOptions: {
    sankey: {
      point: {
        events: {
          mouseOver: function() {
            linksHover(this, 'hover');
          },
          mouseOut: function() {
            linksHover(this, '');
          }
        }
      }
    }
  },

API 引用:

• https://api.highcharts.com/class-reference/Highcharts.Point#setState
• https://api.highcharts.com/highcharts/plotOptions.series.point.events.mouseOver
• https://api.highcharts.com/highcharts/plotOptions.series.point.events.mouseOut