teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【JavaScript】少々特殊なグラフ描写について質問

編集履歴

質問編集履歴

8

追記

2020/09/21 22:24

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  # ソースコードの抜粋
72
72
 
73
- HTMLとJavaScriptのコードです。
73
+ HTMLとJavaScriptのコードです。（CSSはないです）
74
74
 
75
75
  JavaScriptのコードは多少切り貼りしています。
76
76
 

7

コードの修正

2020/09/21 22:24

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  <div>
84
84
 
85
- <canvas #claimCategoryChart width="744px" height="212px"></canvas>
85
+ <canvas #categoryChart width="744px" height="212px"></canvas>
86
86
 
87
87
  </div>
88
88
 
@@ -92,6 +92,34 @@
92
92
 
93
93
  ```javascript
94
94
 
95
+
96
+
97
+ （省略）
98
+
99
+
100
+
101
+ // 宣言
102
+
103
+ @ViewChild('categoryChart')
104
+
105
+ elementRef: ElementRef;
106
+
107
+ chartData = { labels: [], series1: [], series2: [] };
108
+
109
+ chartOptions: ChartOptions;
110
+
111
+ context: CanvasRenderingContext2D;
112
+
113
+ chart: Chart;
114
+
115
+
116
+
117
+ （省略）
118
+
119
+
120
+
121
+ // chart作成関数
122
+
95
123
  chartCreate(history: Score[]): void {
96
124
 
97
125
 

6

誤字修正

2020/09/21 22:15

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -150,6 +150,8 @@
150
150
 
151
151
  fontSize: 16,
152
152
 
153
+ // 色をつけようと試した箇所
154
+
153
155
  // fontColor: ['#f0554e', '#f3ca3e'],
154
156
 
155
157
  // callback: (tickValue, index, ticks) => {
@@ -184,8 +186,6 @@
184
186
 
185
187
  // チャートの作成
186
188
 
187
- // console.log('this.chartData.series1', this.chartData.series1);
188
-
189
189
  this.chart = new Chart(this.context, {
190
190
 
191
191
  type: environment.chart_type,

5

chart.jsのバージョンとコードを追記しました。

2020/09/21 21:43

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  Internet Explorer 11（または、Microsoft Edge）
34
34
 
35
- ※他は特に制約ないです。
35
+ chart.js 2.9.24
36
36
 
37
37
 
38
38
 
@@ -64,6 +64,172 @@
64
64
 
65
65
 
66
66
 
67
-
68
-
69
67
  お手数ですが、アドバイスをお願い致します。
68
+
69
+
70
+
71
+ # ソースコードの抜粋
72
+
73
+ HTMLとJavaScriptのコードです。
74
+
75
+ JavaScriptのコードは多少切り貼りしています。
76
+
77
+ また、Scoreオブジェクトは日付、カテゴリ、スコアを持っています。
78
+
79
+
80
+
81
+ ```html
82
+
83
+ <div>
84
+
85
+ <canvas #claimCategoryChart width="744px" height="212px"></canvas>
86
+
87
+ </div>
88
+
89
+ ```
90
+
91
+
92
+
93
+ ```javascript
94
+
95
+ chartCreate(history: Score[]): void {
96
+
97
+
98
+
99
+ // チャートデータのセット
100
+
101
+ this.chartData.labels = [];
102
+
103
+ this.chartData.series1 = [];
104
+
105
+ this.chartData.series2 = [];
106
+
107
+ history.forEach((score, i) => {
108
+
109
+ const scoringDate = new Date(score.SCORINGDATE);
110
+
111
+ // ラベルを日付とカテゴリの配列にする（日付\nカテゴリと表示される）
112
+
113
+ this.chartData.labels[i] =
114
+
115
+ [this.datepipe.transform(scoringDate, 'M/d'), score.CATEGORY];
116
+
117
+ this.chartData.series1[i] = score.model[0].SCORE;
118
+
119
+ this.chartData.series2[i] = score.model[1].SCORE;
120
+
121
+ });
122
+
123
+
124
+
125
+ // チャートオプションのセット
126
+
127
+ this.chartOptions = {
128
+
129
+ scales: {
130
+
131
+ yAxes: [
132
+
133
+ {
134
+
135
+ ticks: {
136
+
137
+ min: 0,
138
+
139
+ max: 100
140
+
141
+ },
142
+
143
+ }],
144
+
145
+ xAxes: [
146
+
147
+ {
148
+
149
+ ticks: {
150
+
151
+ fontSize: 16,
152
+
153
+ // fontColor: ['#f0554e', '#f3ca3e'],
154
+
155
+ // callback: (tickValue, index, ticks) => {
156
+
157
+ // return tickValue;
158
+
159
+ // }
160
+
161
+ },
162
+
163
+ }],
164
+
165
+ },
166
+
167
+ events: ['click'],
168
+
169
+ onClick: (event, elements) => {
170
+
171
+ this.changeDate(elements, history);
172
+
173
+ }
174
+
175
+ };
176
+
177
+
178
+
179
+ // canvasの取得
180
+
181
+ this.context = this.elementRef.nativeElement.getContext('2d');
182
+
183
+
184
+
185
+ // チャートの作成
186
+
187
+ // console.log('this.chartData.series1', this.chartData.series1);
188
+
189
+ this.chart = new Chart(this.context, {
190
+
191
+ type: environment.chart_type,
192
+
193
+ data: {
194
+
195
+ labels: this.chartData.labels,
196
+
197
+ datasets: [{
198
+
199
+ label: 'Aモデル',
200
+
201
+ data: this.chartData.series1,
202
+
203
+ backgroundColor: ['rgba(0, 0, 255, 0)'],
204
+
205
+ borderColor: ['rgba(20, 0, 255, 100)'],
206
+
207
+ steppedLine: true,
208
+
209
+ borderWidth: 4,
210
+
211
+ }, {
212
+
213
+ label: 'Bモデル',
214
+
215
+ data: this.chartData.series2,
216
+
217
+ backgroundColor: ['rgba(135, 206, 250, 0)'],
218
+
219
+ borderColor: ['rgba(135, 206, 250, 100)'],
220
+
221
+ steppedLine: true,
222
+
223
+ borderWidth: 2,
224
+
225
+ }],
226
+
227
+ },
228
+
229
+ options: this.chartOptions,
230
+
231
+ });
232
+
233
+ };
234
+
235
+ ```

4

誤字修正

2020/09/21 21:41

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  実現方法は何でも良いのですが、
42
42
 
43
- 以下の通り、X軸ラベルに日付と事案カテゴリをセットしてグラフ上部の表を作成しようと思っています。
43
+ 以下の通り、X軸ラベルに日付とカテゴリをセットしてグラフ上部の表を作成しようと思っています。
44
44
 
45
45
  labels: [[6/1, 低], [6/5, 低], ～, [7/13, 中]]
46
46
 

3

誤字修正

2020/09/06 23:55

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,11 @@
54
54
 
55
55
  # 試したこと
56
56
 
57
- 以下を参考に、fontColorを配列にしてみましたが、fontColorがデフォルトになってしまいました。
57
+ 以下を参考に、fontColorを配列にしてみましたが、デフォルトの色になり、
58
+
59
+ 設定通りにセット出来ませんでした。
60
+
61
+
58
62
 
59
63
  [https://github.com/chartjs/Chart.js/issues/2442](https://github.com/chartjs/Chart.js/issues/2442)
60
64
 

2

解決したことがあるので質問範囲を絞りました。

2020/09/06 12:42

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -14,10 +14,6 @@
14
14
 
15
15
  ※カテゴリ：全てのモデルのスコアを元に算出し、高、中、低で表現したもの。
16
16
 
17
- ・グラフ上の日付をクリックすると、その日付の詳細がグラフの下に表示される
18
-
19
- ※クリックする場所はまだ決めていない。（操作しやすければ何でも良い）
20
-
21
17
 
22
18
 
23
19
  ＜希望＞
@@ -27,12 +23,6 @@
27
23
  ※現在chart.jsを使用して色々と試行錯誤しているので、chart.jsを使いたいです。
28
24
 
29
25
  　chart.jsで実現できなければ他のライブラリでも全く問題ないです。
30
-
31
-
32
-
33
- ＜その他＞
34
-
35
- ・グラフの横幅は固定幅とし、表示する日付が多い場合は、日付の間隔を狭める
36
26
 
37
27
 
38
28
 
@@ -48,49 +38,27 @@
48
38
 
49
39
  # 困っていること
50
40
 
51
- 2つ困っていることがあります。
41
+ 実現方法は何でも良いのですが、
42
+
43
+ 以下の通り、X軸ラベルに日付と事案カテゴリをセットしてグラフ上部の表を作成しようと思っています。
44
+
45
+ labels: [[6/1, 低], [6/5, 低], ～, [7/13, 中]]
52
46
 
53
47
 
54
48
 
55
- (1)
49
+ 次にラベルの項目毎（低、中、高）のfontColorを変更しようと考えたのですが、
56
50
 
57
- 線グラフの部分はchart.jsで表現できるのですが、
58
-
59
- 線グラフ上部にカテゴリを表示する方法が分かりません。
51
+ 方法が分かりませんでした。
60
52
 
61
53
 
62
54
 
63
- 横軸のラベルとして日付とカテゴリの2つが存在し、
55
+ # 試したこと
64
56
 
65
- それをグラフ上部に表示するようなイメージを持っているのですが、
57
+ 以下を参考に、fontColorを配列にしてみましたが、fontColorがデフォルトになってしまいました。
66
58
 
67
- どう実装するのか分かりませんでした。
68
-
69
- ※こだわりはないので、ラベルとして表示するのではなく、
70
-
71
- 　グラフとカテゴリテーブルとを分けて実装しても良いのですが、
59
+ [https://github.com/chartjs/Chart.js/issues/2442](https://github.com/chartjs/Chart.js/issues/2442)
72
-
73
- 　両者を連動させる必要があります。
74
60
 
75
61
 
76
-
77
- (2)
78
-
79
- グラフ上を押下して日付を取得する方法が分かりません。
80
-
81
- (1)をどう解決するかによって、日付の取得方法は変わってくるのですが、
82
-
83
- 仮に日付をラベルとして表示する場合、
84
-
85
- chart.jsでラベル項目を取得する方法があるのか分かりませんでした。
86
-
87
-
88
-
89
- クリックする場所は実装出来る方法で決めようと思っており、
90
-
91
- 日付の文字列でもグラフの線でもどこでも大丈夫です。
92
-
93
- （操作する人が、日付を選択する時にクリックしようと思う場所であればどこでも可）
94
62
 
95
63
 
96
64
 

1

環境の追記

2020/09/06 12:41

投稿

waito
waito

スコア23

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  Angular 10
42
42
 
43
- Internet Explorer（または、Microsoft Edge）
43
+ Internet Explorer 11（または、Microsoft Edge）
44
44
 
45
45
  ※他は特に制約ないです。
46
46