Двойной щелчок 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

РЕДАКТИРОВАТЬ

---

Подробно изучив это требование, я думаю, что лучшее решение для в этом случае будет создаваться настраиваемое событие детализации. Ниже приведена базовая демонстрация c, которая должна стать хорошим началом для ее реализации.

Демо: https://jsfiddle.net/BlackLabel/21utpsoy/

Причина в том, что модуль детализации с * Функциональность 1029 * вызывает некоторые ошибки, см .: https://jsfiddle.net/BlackLabel/copL4h36/.

API для используемых функций:

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

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