Как получить имя Label для диаграммы p ie, используя angular - PullRequest
Новая
       31

Как получить имя Label для диаграммы p ie, используя angular

0 голосов
/ 15 февраля 2020

Я только что создал диаграмму p ie в angular 8. И я могу ее просмотреть. Но я просто хочу получить название метки на основе клика p ie.

Изображение:

enter image description here

Установлено 

npm install ng2-charts

Добавлены строки ниже в html файле: 

<div style="display: block">
    <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

Добавлены строки ниже в файле скрипта: 

 public pieChartLabels: string[] = ['PayCreditWallet','Paypal','Google Pay','Amazon Pay'];
 public pieChartData: number[] = [1,2,3,4];
 public pieChartType: any = 'pie';

  // events
  public chartClicked(e: any): void {
    alert(e);
  }

 public chartHovered(e: any): void {

    console.log(e.data);
  }

Когда я щелкните метку (фрагмент) на графике p ie. Я вижу событие щелчка как предупреждение, как упомянуто выше. Можно ли получить имя метки, когда я щелкаю метку Speci c на графике p ie (срез). Пример. На графике p ie при нажатии кнопки «AmazonPay» должно отображаться предупреждение «AmazonPay». Я не знаю, как этого добиться. Может кто-нибудь помочь мне в этом?

1 Ответ

0 голосов
/ 15 февраля 2020

Попробуйте этот код:

.ts файл 

 public barChartOptions = {
    legend: {
      labels: {
        //fontFamily: '"Arvo", serif',
        fontSize: 20,
      }
    }
  };
public chartClicked(e: any): void {
    if (e.active.length > 0) {
      const chart = e.active[0]._chart;
      const activePoints = chart.getElementAtEvent(e.event);
        if ( activePoints.length > 0) {
          // get the internal index of slice in pie chart
          const clickedElementIndex = activePoints[0]._index;
          const label = chart.data.labels[clickedElementIndex];
          console.log(label)
        }
      }
  }

. html

<div style="display: block">
    <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            [options]="barChartOptions"></canvas>
  </div>

рабочая ссылка

https://stackblitz.com/edit/angular-lrq4ee

Ссылка Github для этого

https://github.com/valor-software/ng2-charts/issues/489

...