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

Question

我想知道是否可以突出显示特定节点点击类似于悬停(linkOpacity)中的状态, 并在单击某个其他节点/系列时将其替换为之前的颜色.

简而言之,当加载图表时,顶部节点最初将被突出显示,并且当用户点击另一个节点时,该特定的所选节点将被突出显示(并且最初突出显示的节点将恢复其正常颜色).

请在下面找到一个类似的JSFiddle,其中突出显示了关于click的特定系列(通过在JavaScript的帮助下添加类来完成).

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

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

Answer 1

您可以简单地从前一个元素中删除additionalClass，然后将其放入单击的元素上：

  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

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

plotOptions: {
  series: {
    animation: false,
    dataLabels: {
      enabled: true,
      nodeFormat: "{point.name}mm"
    },
    allowPointSelect: true,//you need this to allow selection
    colorByPoint: false,
    point: {
      events: {
        select: function(event) {
          if (typeof this.isNode !== 'undefined') return;//to disable selecting the root node
          this.custom_old_color = this.color;//save old color
          this.update({
            color: 'red'
          });
        },
        unselect: function(event) {
          if (typeof this.isNode !== 'undefined') return;
          this.update({
            color: this.custom_old_color//restore old color
          });
        }
      }
    }
  }

JSFiddle