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

编辑

---

在深入研究此要求后，我认为此案例的最佳解决方案将是创建自定义向下钻取事件。下面是一个基本的演示，应该是实施它的良好开端。

演示：https://jsfiddle.net/BlackLabel/21utpsoy/

原因是具有dbclick 功能的向下钻取模块会引发一些错误，请参阅：https://jsfiddle.net/BlackLabel/copL4h36/。

使用功能的API：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

• https://api.highcharts.com/class-reference/Highcharts.Series#update