如何从用户那里获取数据并在图表中显示它们 Ionic 2答案

【问题标题】：How to get data from user and display them in a chart Ionic 2如何从用户那里获取数据并在图表中显示它们 Ionic 2
【发布时间】：2017-12-14 12:13:21
【问题描述】：

这是我在图表中显示一些数据的代码。这里的问题是如何从用户输入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]
            }]
       });
     }

}

【问题讨论】：

ionicframework.com/docs/api/components/input/Input
@Jota.Toledo 是的，我知道如何使用离子输入。我使用离子输入做了几页。但问题是我不知道如何在图表中显示它。目前，图表从编码中获取数据，而不是从用户输入中获取数据。

标签： angular typescript charts ionic2

【解决方案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]
      }]
      });
  }
}

【讨论】：