ユーザーからデータを取得してグラフに表示する方法Ionic 2

Question

グラフにデータを表示するコードです。ここでの質問は、ユーザー入力ion-inputからのデータを、data: [80,88, 89]のようなコーディングでプログラミングするのではなく、チャート形式で表示する方法です。私は解決策を探していましたが、既にデータが入っているソースコードしか見つかりませんでした。前もって感謝します。

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

私はすでにそれを行う方法に考え出しました。しかし、データの束を取得したいのであれば、私のコーディングはあまり効果的ではないようです。誰かが私より簡単で簡単な方法を知っているなら、あなたのコードを公開するのをためらってください。ありがとう！

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] 
     }] 
     }); 
    } 
}