Question

我想知道是否可以突出显示特定节点，点击类似于states in hover(linkOpacity) ，并在点击某个其他节点/系列时将其替换为之前的颜色。

简而言之，当加载图表时，顶部节点最初会突出显示，当用户点击另一个节点时，该特定的选定节点会突出显示（并且最初突出显示的节点将恢复其正常颜色）。

请在下面找到类似的JSFiddle，其中突出显示了有关点击的特定系列（通过在JavaScript的帮助下添加类来完成）。

events: {
    click: function (event) {                         
           event.target.classList.add('additionalClass');
    }
}

Highcharts中是否有任何功能可以在没有最终用户进行任何DOM操作的情况下实现这一功能？

Answer 1

您只需更新click事件中的点颜色：

  point: {
    events: {
      click: function(event) {
        this.update({
          color: 'red'
        });
      }
    }
  }

实时工作示例： http://jsfiddle.net/kkulig/dg2uf8d0/

API参考： https://api.highcharts.com/highcharts/plotOptions.sankey.point.events

Answer 2

您只需从上一个元素中删除saveWorkbook(wb, 'df.xlsx')，然后输入点击的元素：

additionalClass

JSFiddle

编辑：没有DOM函数的变体：

  events: {
            click: function (event) {   
                let old_HL = document.querySelector('#container .highcharts-link.highcharts-point.additionalClass');
                if (old_HL) old_HL.classList.remove('additionalClass');
                event.target.classList.add('additionalClass');
            }
   }

JSFiddle

是否有任何方法可以在点击时突出显示特定节点Highcharts Sankey

2 个答案: