Как использовать данные json в chart.js в ионном приложении - PullRequest
Новая
       0

Как использовать данные json в chart.js в ионном приложении

0 голосов
/ 23 октября 2018

Я хотел бы реализовать файл chart.js, я последовал примеру ЗДЕСЬ , он хорошо работал с данными выборочного массива, но теперь я хочу поместить оперативную выборку данных в формате json со своего сервера.Не удалось найти способ.

это моя html-страница 

<ion-header>

  <ion-navbar>
    <ion-title>results</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

 <ion-card >
  <ion-card-header>
    Bar Chart
  </ion-card-header>
  <ion-card-content>
    <canvas width="800" height="800" #barCanvas></canvas>
  </ion-card-content>
</ion-card>
</ion-content>

и моя страница .ts 

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import { LoadingController, AlertController } from 'ionic-angular';
import {Http, Headers, RequestOptions}  from "@angular/http";
import 'rxjs/add/operator/map';



@IonicPage()
@Component({
  selector: 'page-results',
  templateUrl: 'results.html',
})
export class ResultsPage {


  @ViewChild('barCanvas') barCanvas;
  barChart: any;
  selectedOption:any;
  items:any;
  val : any=[];
  val2 : any=[];

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public loading: LoadingController,
    public alertCtrl: AlertController) {
  }

  ionViewDidLoad() {
    this.selectedOption = this.navParams.get('options');



    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );

    let options = new RequestOptions({ headers: headers });

    let data = {

        option: this.selectedOption

         };

    let loader = this.loading.create({

    content: 'Processing please wait...',

    });

    loader.present().then(() => {

    this.http.post('mydomain/fetch_data.php',data, options)

    .map(res => res.json())

        .subscribe(res => {

         loader.dismiss()

        this.items=res.server_response;

        console.log(this.items);
        this.items.map((item)=>{
          this.val1.push(item.options);
        });
        this.items.map((item)=>{
          this.val2.push(item.result);
        });



        });

        });


    this.showChart();

  }

  showChart(){

           this.barChart = new Chart(this.barCanvas.nativeElement, {

               type: 'bar',
               data: {
                   labels: this.val1,
                   datasets: [{
                       label: '# of Votes',
                       data: this.val2,
                       backgroundColor: [
                           'rgba(255, 99, 132, 0.2)',
                           'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 206, 86, 0.2)',
                           'rgba(75, 192, 192, 0.2)'
                       ],
                       borderColor: [
                           'rgba(255,99,132,1)',
                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)'
                       ],
                       borderWidth: 1
                   }]
               },
               options: {
                   scales: {
                       xAxes: [{
                           ticks: {
                               beginAtZero:true
                           }
                       }]
                   }
               }

           });

   }
  }

Я получил данные json, но преобразовал их вдругой массив, например метки: [«Красный», «Коричневый», «Синий», «Желтый», «Зеленый», «Фиолетовый», «Оранжевый»] и данные: [11, 15, 22, 4, 6, 2, 3], так что я могу использовать его как val1 и val2, как показано выше, это моя задача.

Заранее спасибо

1 Ответ

0 голосов
/ 23 октября 2018

Сначала вы устанавливаете ng2-диаграммы и import { ChartsModule } from 'ng2-charts'; в app/app.module.ts

в example.html 

      <div style="display: block; color:white; responsive: true; 
      maintainAspectRatio: false;">
       <canvas baseChart
       height="350"
       [colors]="chartColors"
       [labels]="doughnutChartLabels"
       [data]="doughnutChartData"
       [chartType]="doughnutChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)"></canvas>
      </div>

в example.ts

export class ExamplePage {
  doughnutChartLabels: string[] = [];
  doughnutChartData: number[] = [];
  doughnutChartType: string = 'pie';
  checkChart : boolean;
...}
pushItem(){
 #pushed your json data in doughnutChartData
 #end called this fonction in ionViewDidLoad and any methods
}
public chartClicked(e:any):void {
#... 
}

public chartHovered(e:any):void {
#...
}
...