Как разрешить выбор нескольких точек в кольцевой диаграмме Highcharts? - PullRequest
Новая
       52

Как разрешить выбор нескольких точек в кольцевой диаграмме Highcharts?

0 голосов
/ 06 августа 2020

Я хочу разрешить пользователю выбирать несколько точек многослойной кольцевой диаграммы.

Мои параметры кольцевой диаграммы следующие: 

{
      chart: {
        styledMode: true,
        type: "pie"
      },
      title: {
        text: "Number of Workflows",
        align: "left",
        useHTML: true
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          slicedOffset: 0,
          innerSize: "60%",
          dataLabels: {
            enabled: false
          },
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          },
          tooltip: {
            headerFormat: "<header>{point.key}</header><br/>",
            pointFormat: "<span> {point.percentage:.1f}% </span>"
          },
          series: {
            point: {
              events: {
                click: function(event) {
                  this.slice(null);
                  this.select(null, true);
                  console.log(this.series.chart.getSelectedPoints());
                }
              }
            }
          }
        }
      },
      series: [
        {
          name: "Type",
          data: [{name: type, y: number}, ...]
        },
        {
          name: "Status",
          size: "60%",
          innerSize: "40%",
          data: [{name: status, y: number}, ...]
        }
      ]

Когда я нажимаю на точку, функция не запускается (в консоли ничего нет), и я не могу выбрать более одной точки. Это из-за styledMode: true? Я также использую Highcharts в приложении Vue.

Спасибо!

1 Ответ

0 голосов
/ 07 августа 2020

Функция не запускается после щелчка, потому что она неправильно назначена в объекте plotOptions.pie.series, но должна быть: 

plotOptions: {
   pie: {
      ...
   },
   series: {
     point: {
       events: {
         click: function(event) {
           this.slice(null);
           this.select(null, true);
           console.log(this.series.chart.getSelectedPoints());
        }
      }
    }
  }
}

Демо: https://jsfiddle.net/BlackLabel/4gp7xd6c/

Или: 

plotOptions: {
   pie: {
   point: {
    events: {
      click: function(event) {
        this.slice(null);
        this.select(null, true);
        console.log(this.series.chart.getSelectedPoints());
      }
    }
   }
 }
}

API: https://api.highcharts.com/highcharts/series.pie.events.click

...