사용자로부터 데이터를 가져 와서 차트에 표시하는 방법 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] 
     }] 
     }); 
    } 
}