Question

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

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

为了澄清，我仍然希望能够单独悬停在它们上面，但是当我将鼠标悬停在最左边的盒子（较暗的红色片段）上时，我希望所有红色路径都突出显示。

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参考：

Answer 2

// you can do more like ...
// sankey chart node disable path hightcharts

 series: [
        {
          point: {
            events: {
              click: async function (e) {

                if (this.shapeType == "path") {     <-- add this 
                  return;                           <--
                }                                   <--

Highcharts sankey。突出显示给定类别的所有路径

2 个答案: