Как отобразить выборочные поля в JSON в ng2-диаграммах в angular - PullRequest
Новая
       18

Как отобразить выборочные поля в JSON в ng2-диаграммах в angular

1 голос
/ 16 февраля 2020

У меня просто есть формат ниже JSON, и я просто хочу отображать только «дату» в качестве оси X и «поток» в качестве оси Y, а «процент» должен отображаться, если я наведите курсор мыши на гистограмму.

У меня ниже JSON: 

{
   "testdata":[
      {
         "fail":3,
         "flow":"Checkout",
         "pass":20,
         "total":23,
         "percentage":80
      },
      {
         "fail":80,
         "flow":"add-cart",
         "pass":60,
         "total":140,
         "percentage":60
      },
      {
         "fail":20,
         "flow":"refund",
         "pass":59,
         "total":79,
         "percentage":80
      }
   ]
}

Я могу получить вышеуказанную полезную нагрузку при вызове метода ниже в файле component.ts: 

 public data:Array<String>=[]; 

 this.http.get(environmenthost.matrixFinder).subscribe((data:any)=>{
        this.data=data.testdata; // The above json is available in the data variable
   });

// ниже я только что попробовал для другого требования. У меня нет никакой идеи построить его для гистограммы с вышеуказанным требованием.

Я использовал ng2-диаграммы для построения диаграммы p ie, как показано ниже: 

            <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [colors]="pieChartColors"
            [chartType]="pieChartType"
            [options]="barChartOptions"
            (chartClick)="chartClicked($event)"></canvas>

Используется ниже строки в файле component.ts для подачи данных в p ie ng2-диаграммы. 

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

  public pieChartColors: Array < any > = [{
   backgroundColor: ['Violet', 'DodgerBlue', 'MediumSeaGreen','Tomato'],
   borderColor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)'],
 }];

Я могу видеть диаграмму p ie для вышеуказанных данных. Как будто я просто хочу создать гистограмму с указанным выше файлом JSON и указанием узла c в качестве оси X и Y на гистограмме.

Я не знаю, как отобразить эти данные в гистограмме. Может кто-нибудь помочь мне в этом?

...