So erhalten Sie Daten vom Benutzer und zeigen sie in einem Diagramm an Ionic 2

Question

Hier ist mein Code, um einige Daten in einem Diagramm anzuzeigen. Die Frage ist hier, wie man die Daten der Benutzereingabe ion-input in Diagrammform anzeigen kann, anstatt sie in der Codierung wie dieser data: [80,88, 89] zu programmieren. Ich habe nach der Lösung gesucht, aber nur den Quellcode gefunden, der bereits Daten enthält. Vielen Dank im Voraus.

performanceReview.html

<ion-header> 
    <ion-navbar> 
     <ion-buttons left> 
      <button ion-button menuToggle> 
       <ion-icon name="menu"></ion-icon> 
      </button> 
     </ion-buttons> 
     <ion-title>Performance Review</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <div id="container" style="display: block;" ></div> 
</ion-content> 

performanceReview.ts

import { Component } from '@angular/core'; 
import { IonicPage } from 'ionic-angular'; 
import * as HighCharts from 'highcharts'; 

@IonicPage() 
@Component({ 
    selector: 'page-performanceReview', 
    templateUrl: 'performanceReview.html',}) 

export class PerformanceReviewPage { 

    constructor() {} 

    ionViewDidLoad() { 
     let myChart = HighCharts.chart('container', { 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Performance Review' 
      }, 
      xAxis: { 
       categories: ['Test 1', 'Test 2', 'Final Exam'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Performance Review' 
       } 
      }, 
      series: [{ 
       name: 'Science', 
       data: [80,88, 89] 
      }, { 
       name: 'Mathematics', 
       data: [95, 78, 89] 
      }] 
     }); 
    } 

} 

Answer 1

ich bereits herausgefunden, wie man es tun. Aber es scheint, dass meine Codierung nicht sehr effektiv ist, wenn ich eine Menge Daten bekommen möchte. Wenn jemand einfacher und einfacher als meine kennt, zögern Sie nicht, Ihren Code zu veröffentlichen. Vielen Dank!

performanceReview.html

<ion-content padding> 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    <input type="number" value="" name="fir" [(ngModel)]="value1"/> 
    <input type="number" value="" name="sec" [(ngModel)]="value2"/> 
    <button ion-button (click)="createChart();">create chart</button> 
</ion-content> 

performanceReview.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavParams } from 'ionic-angular'; 
import * as HighCharts from 'highcharts'; 

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

    value1: number; 
    value2: number; 

    constructor(params: NavParams) 
    { 
     this.value1 = params.get('value1'); 
     this.value2 = params.get('value2'); 
    } 
    createChart(){ 
    let val1 = this.value1; 
    let val2 = this.value2; 
    let myChart = HighCharts.chart('container', { 
     chart: { 
     type: 'bar' 
     }, 
     title: { 
     text: 'Performance Review' 
     }, 
     xAxis: { 
     categories: ['Test 1', 'Test 2'] 
     }, 
     yAxis: { 
     title: { 
     text: 'Performance Review' 
     } 
     }, 
     series: [{ 
     name: 'Sains', 
     data: [val1] 
     }, { 
     name: 'Matematik', 
     data: [val2] 
     }] 
     }); 
    } 
}