如何從用戶獲取數據並將其顯示在圖表中Ionic 2

Question

這是我的代碼，用於在圖表中顯示一些數據。 這里的問題是如何從用戶輸入的ion-input獲取數據以圖表形式顯示，而不是像這樣的data: [80,88, 89]在代碼中編程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]
      }]
      });
  }
}