回答編集履歴
1
TypeScript \(Angular4\) サンプル追加
answer
CHANGED
|
@@ -46,4 +46,53 @@
|
|
|
46
46
|
</script>
|
|
47
47
|
</body>
|
|
48
48
|
</html>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
TypeScriptサンプルを追加します。
|
|
52
|
+
Angular-Cli 1.3.2 (Angular 4.3.6) + Chart.js 2.6.0で動作しています。
|
|
53
|
+
|
|
54
|
+
```TypeScript
|
|
55
|
+
import { Component, OnInit } from '@angular/core';
|
|
56
|
+
|
|
57
|
+
@Component({
|
|
58
|
+
selector: 'app-chart',
|
|
59
|
+
template: '<div><button (click)="clicked($event)">Update</button><canvas id="graph1"></canvas></div>'
|
|
60
|
+
})
|
|
61
|
+
export class ChartComponent implements OnInit {
|
|
62
|
+
cnt = 0;
|
|
63
|
+
myChart;
|
|
64
|
+
|
|
65
|
+
constructor() { }
|
|
66
|
+
|
|
67
|
+
ngOnInit() {
|
|
68
|
+
const element = <HTMLCanvasElement>document.getElementById('graph1');
|
|
69
|
+
const ctx = element.getContext('2d');
|
|
70
|
+
this.myChart = new Chart(ctx, {type: 'bar', data: this.chartdata([])});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
private chartdata(newData:Array<number>) {
|
|
74
|
+
return {
|
|
75
|
+
labels: ["1月","2月","3月"],
|
|
76
|
+
datasets: [
|
|
77
|
+
{
|
|
78
|
+
label: "件数",
|
|
79
|
+
fillColor: "rgba(220,220,220,0.5)",
|
|
80
|
+
strokeColor: "rgba(220,220,220,0.8)",
|
|
81
|
+
highlightFill: "rgba(220,220,220,0.75)",
|
|
82
|
+
highlightStroke: "rgba(220,220,220,1)",
|
|
83
|
+
data: newData
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
clicked(event) {
|
|
90
|
+
this.cnt++;
|
|
91
|
+
const newData = ((this.cnt & 1) === 1)
|
|
92
|
+
? [10, 20, 30]
|
|
93
|
+
: [30, 20, 10];
|
|
94
|
+
this.myChart.data = this.chartdata(newData);
|
|
95
|
+
this.myChart.update();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
49
98
|
```
|