javascript - 来自json http请求的ionic显示chartjs数据

我正在构建一个离子应用程序，以通过从URL / HTTP请求中检索数据来显示仪表板（饼图）。这是我在.ts文件中的代码从URL调用数据，我设法在e.g. {{ items.data }}文件中使用.html以表格形式显示了此代码：

public items : Array<any> = [];

ionViewWillEnter() : void{
      this.load();
   }

 load() : void{
          this.http.get('http://localhost/test/retrieve-data.php')
          .subscribe((data : any) =>{
             console.dir(data);
             this.items = data;
          },
          (error : any) =>{
             console.dir(error);
          });
       }

我的问题是我想从一行中检索数据并将其显示在饼图中。例如，这是我想获取的那一行：

[{"id":9,"twitter_name":"Max Payne","positive_tweets":24,"negative_tweets":14,"total_tweets":38,"pos_percent":63,"neg_percent":37}]

我想显示一个饼图，该饼图显示pos_percent和neg_percent的值。

这是我一直在做的事情，但仍然停留在调用行数据上：

@ViewChild('pieChart') pieChart;

public pieChartEl : any;

createPieChart()
   {

      this.pieChartEl           = new Chart(this.pieChart.nativeElement,
      {
         type: 'pie',
         data: {
             labels: ["Positive","Negative"],
             datasets: [{
                 data                  : [],
                 duration              : 2000,
                 easing                : 'easeInQuart',
                 backgroundColor       : "rgba(54, 116, 152, 0.5)",
                 hoverBackgroundColor  : "rgba(160, 116, 152, 0.5)"
             }]
         },
         options : {
            maintainAspectRatio: false,
            layout: {
               padding: {
                  left     : 50,
                  right    : 0,
                  top      : 0,
                  bottom   : 0
               }
            },
            animation: {
               duration : 5000
            }
         }
      });



      this.chartLoadingEl = this.pieChartEl.generateLegend();
   }

ionViewDidLoad()
   {
      this.createPieChart();
   }

我该如何获取这些数据？

最佳答案

要从HTTP请求中绘制PieChart，请遵循以下说明：

1-确保安装了Angular 2图表和Charts.js，只需键入以下命令：

npm install ng2-charts --save
npm install chart.js --save

2-注册图表模块：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ChartsModule } from 'ng2-charts';
import { Http, HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    HttpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ChartsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

3-将Canvas标签添加到您的html文件中，如下所示：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>

  <div style="display: block">
    <canvas baseChart #baseChart="base-chart"
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [chartType]="doughnutChartType"></canvas>
  </div>

</ion-content>

4：获取json数据并绘制到画布上：

注意：我通过HTTP从asset / datas.json加载json。

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Response} from '@angular/http';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild("baseChart") pieChartEl: BaseChartDirective;

  public doughnutChartLabels: string[] = [];
  public doughnutChartData: number[] = [];
  public doughnutChartType: string = 'doughnut';

  constructor(public navCtrl: NavController, public http: Http) {

  }

  ionViewDidLoad() {
    this.updateData();
  }

  public updateData() {
    this.http.get("/assets/datas.json").subscribe((res: Response) => {
          let jsons = res.json();
          let data = jsons[0];
          this.doughnutChartLabels.push("pos_percent");
          this.doughnutChartLabels.push("neg_percent");

          this.doughnutChartData.push(data.pos_percent);
          this.doughnutChartData.push(data.neg_percent);

          console.log(this.doughnutChartLabels);
          console.log(this.doughnutChartData);

          if(this.pieChartEl !== undefined){
            this.pieChartEl.ngOnDestroy();
            this.pieChartEl.chart = this.pieChartEl.getChartBuilder(this.pieChartEl.ctx);
          }
      });
  }
}

5：这是我的结果：



您可以在ionic3-chart中检查我的代码
我希望这可以帮助:)。

关于javascript - 来自json http请求的ionic显示chartjs数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53272805/