Блог

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

Например: на этом изображении нужно показать процент хрома в центре круговой диаграммы, т.е. 61,41.

 plotOptions: {
  pie: {
    allowPointSelect: true,
    showInLegend: true,
    cursor: 'pointer',
    innerSize: '50%',
    dataLabels: {
      enabled: false,
      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
      style: {
        color:
          (Highcharts.theme amp;amp; Highcharts.theme.contrastTextColor) ||
          'black',
      },
    },
    states: {
      hover: {
        brightness: 0,
        halo: {
          opacity: 1,
        },
      },
      select: {
        brightness: 0,
        halo: {
          opacity: 1,
        },
      },
    },
    point: {
      event: {
        mousehover: function () {
          let chart = this.series.chart;
          chart.title.attr({
            text: `<span style="color:#e43761;" class="dealer-title" data-oa-qa="donut-total-count-text">Total<br/><b>${this.y}</b></span>`,
          });
          alert('hello');
        },
        click: function () {
          alert('heye hello');
        },
        legendItemClick: function () {
          let chart = this.series.chart;
          chart.title.attr({
            text: `<span style="color:#e43761;" class="dealer-title" data-oa-qa="donut-total-count-text">Total<br/><b>${this.y}</b></span>`,
          });
        },
      },
    },
  },
}
 

URL-адрес StackBlitz https://stackblitz.com/edit/pie-chart-using-highcharts-er7kym?file=app/highcharts.service.ts