teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問chart.jsをでの横軸ラベルの書式の設定

編集履歴

質問編集履歴

1

体裁をととのえました

2017/06/04 07:18

投稿

runa
runa

スコア38

test CHANGED
File without changes
test CHANGED
@@ -1,167 +1,197 @@
1
- chart.jsを使用しての横軸のラベルの書式の設定方法を教えてください。
1
+ ###前提・実現したいこと
2
2
 
3
- chart.js 2.1 を読み込んでます。
3
+ chart.jsを使用しての横軸のラベルの書式の設定方法を教えてください。
4
4
 
5
+ ###発生している問題・エラーメッセージ
6
+
7
+ 横軸ラベルの書式が反映されません。
8
+
9
+ chart.js 2.1 を読み込んでます。
10
+
5
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
6
12
 
7
13
 
8
14
 
9
- グラフの仕様は、下記のように指定しています。
15
+ ```
10
16
 
11
- 横軸のラベルとして、"01:00","02:00",---,"23:00"のように 時刻を表示したいのですが、できません。
17
+ エラーメッセージ
12
18
 
19
+ ```
20
+
21
+
22
+
23
+ ###該当のソースコード
24
+
25
+ ```javascript
26
+
27
+ var timeFormat = 'MM/DD/YYYY HH:mm';
28
+
29
+ var config = {
30
+
31
+ type: 'line',
32
+
33
+ data: {
34
+
35
+
36
+
37
+ labels: [ // Date Objects
38
+
39
+ "05/12/2017 01:20",
40
+
41
+ "05/12/2017 02:20",
42
+
43
+ "05/12/2017 03:20",
44
+
45
+ "05/12/2017 04:20",
46
+
47
+ "05/12/2017 10:20",
48
+
49
+ "05/12/2017 15:20",
50
+
51
+ "05/12/2017 20:20"
52
+
53
+ ],
54
+
55
+
56
+
57
+ datasets: [
58
+
59
+ {
60
+
61
+ label: "Dataset with point data",
62
+
63
+ backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
64
+
65
+ borderColor: window.chartColors.green,
66
+
67
+ fill: false,
68
+
69
+ data: [{
70
+
71
+ x: "05/12/2017 01:29",
72
+
73
+ y: 10
74
+
75
+ }, {
76
+
77
+ x: "05/12/2017 10:29",
78
+
79
+ y: 20
80
+
81
+ }, {
82
+
83
+ x: "05/12/2017 19:29",
84
+
85
+ y: 30
86
+
87
+ }, {
88
+
89
+ x: "05/12/2017 22:29",
90
+
91
+ y: 2
92
+
93
+ }
94
+
95
+ ],
96
+
97
+ }]
98
+
99
+ }
100
+
101
+ ,
102
+
103
+ options: {
104
+
105
+ title:{
106
+
107
+ display: true,
108
+
109
+ text: "Chart.js Time Scale"
110
+
111
+ },
112
+
113
+ scales: {
114
+
115
+ xAxes: [{
116
+
117
+ type: "time",
118
+
119
+ time: {
120
+
121
+ format: timeFormat,
122
+
123
+ },
124
+
125
+ scaleLabel: {
126
+
127
+ display: true,
128
+
129
+ labelString: '---Time---'
130
+
131
+ }
132
+
133
+ //displayFormats: 'h:mm:ss' // NG
134
+
135
+ //displayFormats: 'HH:mm' // NG
136
+
137
+ //displayFormats: timeFormat // NG
138
+
13
- "2017-05-12TO1:00:00+09:00","2017-05-12TO7:00:00+09:00",---,"2017-05-12TO23:00:00+09:00"のようになってしまいます。
139
+ //displayFormats: "minute" // NG
140
+
141
+ //displayFormats: 'MMM YYYY' // NG
142
+
143
+ }, ],
144
+
145
+ yAxes: [{
146
+
147
+ ticks: {
148
+
149
+ min: 0, // 原点0
150
+
151
+ max: 70
152
+
153
+ },
154
+
155
+
156
+
157
+ scaleLabel: {
158
+
159
+ display: true,
160
+
161
+ labelString: 'value'
162
+
163
+ }
164
+
165
+ }]
166
+
167
+ },
168
+
169
+ }
170
+
171
+ };
172
+
173
+
174
+
175
+ ```
176
+
177
+
178
+
179
+ ###試したこと
14
180
 
15
181
  displayFormats を使用したのですが、変化なしでした。よろしくお願いします。
16
182
 
183
+ //displayFormats: 'h:mm:ss' // NG
17
184
 
185
+ //displayFormats: 'HH:mm' // NG
18
186
 
19
- -------------------------------------------------------------
187
+ //displayFormats: timeFormat // NG
20
188
 
21
- var timeFormat = 'MM/DD/YYYY HH:mm';
189
+ //displayFormats: "minute" // NG
22
190
 
23
- var config = {
191
+ //displayFormats: 'MMM YYYY' // NG
24
192
 
25
- type: 'line',
193
+
26
194
 
27
- data: {
195
+ ###補足情報(言語/FW/ツール等のバージョンなど)
28
196
 
29
-
30
-
31
- labels: [ // Date Objects
32
-
33
-
34
-
35
- "05/12/2017 01:20",
36
-
37
- "05/12/2017 02:20",
38
-
39
- "05/12/2017 03:20",
40
-
41
- "05/12/2017 04:20",
42
-
43
- "05/12/2017 10:20",
44
-
45
- "05/12/2017 15:20",
46
-
47
- "05/12/2017 20:20"
48
-
49
- ],
50
-
51
-
52
-
53
- datasets: [
54
-
55
- {
56
-
57
- label: "Dataset with point data",
58
-
59
- backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
60
-
61
- borderColor: window.chartColors.green,
62
-
63
- fill: false,
64
-
65
- data: [{
66
-
67
- x: "05/12/2017 01:29",
68
-
69
- y: 10
70
-
71
- }, {
72
-
73
- x: "05/12/2017 10:29",
74
-
75
- y: 20
76
-
77
- }, {
78
-
79
- x: "05/12/2017 19:29",
80
-
81
- y: 30
82
-
83
- }, {
84
-
85
- x: "05/12/2017 22:29",
86
-
87
- y: 2
88
-
89
- }
90
-
91
- ],
92
-
93
- }]
94
-
95
- }
96
-
97
- ,
98
-
99
- options: {
100
-
101
- title:{
197
+ より詳細な情報
102
-
103
- display: true,
104
-
105
- text: "Chart.js Time Scale"
106
-
107
- },
108
-
109
- scales: {
110
-
111
- xAxes: [{
112
-
113
- type: "time",
114
-
115
- time: {
116
-
117
- format: timeFormat,
118
-
119
- },
120
-
121
- scaleLabel: {
122
-
123
- display: true,
124
-
125
- labelString: '---Time---'
126
-
127
- }
128
-
129
- //displayFormats: 'h:mm:ss' // NG
130
-
131
- //displayFormats: 'HH:mm' // NG
132
-
133
- //displayFormats: timeFormat // NG
134
-
135
- //displayFormats: "minute" // NG
136
-
137
- //displayFormats: 'MMM YYYY' // NG
138
-
139
- }, ],
140
-
141
- yAxes: [{
142
-
143
- ticks: {
144
-
145
- min: 0, // 原点0
146
-
147
- max: 70
148
-
149
- },
150
-
151
-
152
-
153
- scaleLabel: {
154
-
155
- display: true,
156
-
157
- labelString: 'value'
158
-
159
- }
160
-
161
- }]
162
-
163
- },
164
-
165
- }
166
-
167
- };