Блог

Я создал диаграмму пончика, используя vue-highcharts / highcharts, и пытаюсь добавить текст при наведении курсора мыши в центр пончика. У меня есть добавление статического текста, однако я пытаюсь вернуть данные из точки, на которую я наведу курсор, чтобы отобразить их в центре, однако, похоже, я не могу найти какие-либо соответствующие данные из объекта события. Кто-нибудь знает, как я мог бы получить доступ к этим данным?

 chartOptions: {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  legend: {
    align: 'right',
    enabled: true,
    layout: 'vertical',
    verticalAlign: 'middle'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      center: ['50%', '50%'],
      showInLegend: true,
      events: {
        mouseOver: (e) => {
          const { chart } = this.$refs.highchartsRef;
          const height = chart.chartHeight / 2;
          const width = e.target.center[3];
          console.log({ chart });
          console.log({ e });
          chart.renderer
            .text('Top Test</br>Bottom Test', width, height, true)
            .css({
              color: '#4a4a4a',
              fontSize: '16px',
              fontWeight: 700
            })
            .addClass('highcharts-center-label text-center')
            .add();
          },
          mouseOut: () => {
            document.querySelector('.highcharts-center-label').remove();
          }
        }
      }
    },
    series: [{
      name: 'Categories',
      colorByPoint: true,
      size: '100%',
      innerSize: '60%',
      data: this.categories.map(category => {
        return {
          name: category.name,
          y: calculateCategoryWeight(category)
        };
      })
    }],
    title: null,
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    }
  }
  

Используйте point.events и базовую функцию вместо стрелки.

     plotOptions: {
        pie: {
            point: {
                events: {
                    mouseOver: function() {
                        var point = this,
                            series = point.series,
                            chart = series.chart;

                        console.log(point.y);
                    }
                }
            }
        }
    }
  

Живая демонстрация: http: //jsfiddle.net/blackLabel/7oub1xzj/

Ссылка на API: https: //api.highcharts.com/highcharts/plotOptions.pie.point.events