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

如何从用户获取数据并将其显示在图表Ionic 2中

1 个答案: