Chart.js 与来自Chartjs 链接的数据
问问题
1908 次
1 回答
0
嘿,我发现这篇文章非常有帮助:http ://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/ 。
它对我理解 ChartJS 有很大帮助。
只需以示例中提到的格式格式化 API 数据,就可以了。
in .HTML file ``` <canvas #lineCanvas></canvas> ```
in .TS file ```
import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController, MenuController, NavParams, ToastController } from 'ionic-angular';
import { Chart } from 'chart.js';
import { DashboardProvider } from '../../providers/dashboard/dashboard';
import { tokenKey } from '@angular/core/src/view';
@Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
providers: [DashboardProvider]
})
export class DashboardPage implements OnInit {
@ViewChild('lineCanvas') lineCanvas;
lineChart: any;
GetAthleteScoreByTest : any;
constructor(public navCtrl: NavController,
private dashApis: DashboardProvider) {
}
ngOnInit() {
this.dashApis.GetAthleteScoreByTest(ACCESS_TOKEN)
.subscribe(
(response) => {
this.GetAthleteScoreByTest = response["data"];
let labels = ['0'];
let data = [0];
let i = 1;
this.GetAthleteScoreByTest.forEach(element => {
data.push(element["AthleteScore"]);
labels.push(i.toString());
++i;
});
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: "Score Comparision",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data,
spanGaps: false,
}
]
}
});
},
(error) => {
}
);
}
}
于 2019-03-19T16:37:17.023 回答