如何从用户获取数据并将其显示在图表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]
      }]
      });
  }
}