Highcharts双击选择

Question

我当前正在使用Highcharts v8.1.0，并且正在实现具有向下钻取功能的柱形图。

我想实现以下内容：

• [当用户双击图表中的列时，将选择该列。用户完成选择一个或多个列后，我想使用列数据在应用程序的另一部分中应用一些过滤，因此想知道是否存在一种方法来获取所有选定项及其相关数据？
• [当用户仅单击一列时，将发生默认的向下钻取行为（当前有效）

我正在使用highcharts-custom-events插件，可以捕获双击事件，但无法弄清楚如何将被单击的列设置为选中状态。

这是我的plotOptions配置：

plotOptions: {
        column: {
          events: {
            dblclick: function(e){
              self.dblClickDetected = true;
              this.selected = true;
              console.log('DOUBLE CLICK', self.chart.getSelectedSeries())
            }
          }
        }

这是追溯事件的配置：

drilldown: (event) => {
            event.preventDefault();
            setTimeout(() => {
              if(!this.dblClickDetected){
                ...do something here...
              }
            }, 500);
            this.dblClickDetected = false;
          }

单击和双击的行为可以更容易实现，可以颠倒。

Answer 1

我准备了一个演示，可以帮助您实现所需的效果。

演示：https://jsfiddle.net/BlackLabel/7aubt81y/

 plotOptions: {
    column: {
      point: {
        events: {
          dblclick: function(e) {
            if (this.state !== 'select') {
              this.update({
                selected: true
              })
            } else {
              this.update({
                selected: false
              })
            }

          }
        }
      }
    }
  },

API：https://api.highcharts.com/highcharts/series.line.selected

API：https://api.highcharts.com/class-reference/Highcharts.Point#update