有什么方法可以在单击时突出显示特定节点 | Highcharts 桑基

Question

我想知道是否可以像 states in hover(linkOpacity) 一样在单击时突出显示特定节点，并在单击另一个 node/series 时将其替换为以前的颜色。

简而言之，加载图表时，最上面的节点最初会高亮显示，当用户单击另一个节点时，该特定选定节点会高亮显示（并且最初高亮显示的节点会恢复为正常颜色).

请在下面找到类似的 JSFiddle，它突出显示了点击时的特定系列（这是通过在 JavaScript 的帮助下添加 class 完成的）。

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

您可以简单地从上一个元素中删除 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

有什么方法可以在单击时突出显示特定节点 | Highcharts 桑基

Is there any way to highlight specific node on click | Highcharts Sankey

javascript

highcharts

sankey-diagram