質問編集履歴

4

コードの変更

2018/02/09 13:06

投稿

rrrrrr
rrrrrr

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,15 @@
10
10
 
11
11
 
12
12
 
13
+ 追記 教えていただいたことを参考にコードを再入力しましたが
14
+
15
+ 変わらずグラフは表示されないままです...。
16
+
17
+
18
+
19
+ ```
20
+
13
- ```<!DOCTYPE HTML>
21
+ <!DOCTYPE HTML>
14
22
 
15
23
  <html>
16
24
 
@@ -38,6 +46,8 @@
38
46
 
39
47
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
40
48
 
49
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
50
+
41
51
 
42
52
 
43
53
  <script>
@@ -62,15 +72,7 @@
62
72
 
63
73
 
64
74
 
65
- } else if (page.matches('#second-page')) {
75
+
66
-
67
-
68
-
69
- page.querySelector('#pop-button').onclick = function() {
70
-
71
- document.querySelector('#navigator').popPage();
72
-
73
- };
74
76
 
75
77
 
76
78
 
@@ -232,103 +234,77 @@
232
234
 
233
235
  </span>
234
236
 
237
+
238
+
239
+
240
+
241
+
242
+
243
+ <div class = "push-button">
244
+
245
+ <ons-button id="push-button">作成<i class="far fa-hand-point-right"></i></ons-button>
246
+
247
+ </div>
248
+
249
+ </ons-page>
250
+
251
+ </ons-template>
252
+
253
+
254
+
255
+ <!-- Page2 -->
256
+
257
+ <ons-template id="page2.html">
258
+
259
+ <ons-page id="second-page">
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+ <ons-toolbar>
268
+
269
+ <div class="left"><ons-back-button></ons-back-button></div>
270
+
271
+ <div class="center">Page 2</div>
272
+
273
+ </ons-toolbar>
274
+
275
+
276
+
277
+
278
+
279
+ <p><a href="https://twitter.com/"><i class = "fab fa-twitter fa-fw"></i></a>
280
+
281
+ <a href="https://www.instagram.com/?hl=ja"><i class="fab fa-instagram fa-fw"></i></a>
282
+
283
+ </p>
284
+
285
+
286
+
287
+
288
+
289
+
290
+
291
+
292
+
235
293
 
236
294
 
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
- <div class = "push-button">
295
+ <div class="container">
296
+
246
-
297
+ <h2>Chart.js — Pie Chart Demo (apples)</h2>
298
+
299
+ <div>
300
+
301
+ <canvas id="myChart"></canvas>
302
+
247
- <ons-button id="push-button">作成<i class="far fa-hand-point-right"></i></ons-button>
303
+ <script src="app.js"></script>
248
304
 
249
305
  </div>
250
306
 
251
- </ons-page>
252
-
253
- </ons-template>
254
-
255
-
256
-
257
- <!-- Page2 -->
258
-
259
- <ons-template id="page2.html">
260
-
261
- <ons-page id="second-page">
262
-
263
-
264
-
265
- <ons-toolbar>
266
-
267
- <div class="left"><ons-back-button> </ons-back-button></div>
268
-
269
- <div class="center">Page 2</div>
270
-
271
- </ons-toolbar>
272
-
273
-
274
-
275
- <div class="content" style="text-align: center">
276
-
277
- <p>This is the second page.</p>
278
-
279
- <ons-button id="pop-button" class = ""> </ons-button>
280
-
281
- </div>
307
+ </div>
282
-
283
-
284
-
285
- <canvas id="myChart"></canvas>
286
-
287
-
288
-
289
- <script src="node_modules/chart.js/dist/Chart.min.js"></script>
290
-
291
- <script>
292
-
293
- var ctx = document.getElementById('myChart').getContext('2d')
294
-
295
- var myChart = new Chart(ctx, {
296
-
297
- type: 'pie',
298
-
299
- data: {
300
-
301
- labels: ["M", "T", "W", "T", "F", "S", "S"],
302
-
303
- datasets: [{
304
-
305
- backgroundColor: [
306
-
307
- "#2ecc71",
308
-
309
- "#3498db",
310
-
311
- "#95a5a6",
312
-
313
- "#9b59b6",
314
-
315
- "#f1c40f",
316
-
317
- "#e74c3c",
318
-
319
- "#34495e"
320
-
321
- ],
322
-
323
- data: [12, 19, 3, 17, 28, 24, 7]
324
-
325
- }]
326
-
327
- }
328
-
329
- })
330
-
331
- </script>
332
308
 
333
309
 
334
310
 
@@ -336,26 +312,6 @@
336
312
 
337
313
  </ons-page>
338
314
 
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
315
 
360
316
 
361
317
 
@@ -366,4 +322,48 @@
366
322
 
367
323
  </html>
368
324
 
325
+
326
+
369
327
  ```
328
+
329
+
330
+
331
+ ```var ctx = document.getElementById("myChart").getContext('2d');
332
+
333
+ var myChart = new Chart(ctx, {
334
+
335
+ type: 'pie',
336
+
337
+ data: {
338
+
339
+ labels: ["M", "T", "W", "T", "F", "S", "S"],
340
+
341
+ datasets: [{
342
+
343
+ backgroundColor: [
344
+
345
+ "#2ecc71",
346
+
347
+ "#3498db",
348
+
349
+ "#95a5a6",
350
+
351
+ "#9b59b6",
352
+
353
+ "#f1c40f",
354
+
355
+ "#e74c3c",
356
+
357
+ "#34495e"
358
+
359
+ ],
360
+
361
+ data: [12, 19, 3, 17, 28, 24, 7]
362
+
363
+ }]
364
+
365
+ }
366
+
367
+ });
368
+
369
+ ```

3

何度も申し訳ございません。htmlのソースはこれで宜しいでしょうか...?

2018/02/09 13:05

投稿

rrrrrr
rrrrrr

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,60 +10,360 @@
10
10
 
11
11
 
12
12
 
13
- ![イメージ説明](8a8db5151f4bed2506d1d6e86afdc725.png)![イメージ説明](1b60a3c1ce705a2836a7c1a6ed30de95.png)![イメージ説明](927620ac693c6c134d936d3e57d52047.png)![イメージ説明](493714b17e68680b5f7d93aa5c5a7988.png)![イメージ説明](fa0bbeb89873e6b2d672674ab22dd512.png)![イメージ説明](764f4a5a9248143867392749c0b71778.png)
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
- ``` <canvas id="myChart"></canvas>
22
-
23
-
24
-
25
- <script src="node_modules/chart.js/dist/Chart.min.js"></script>
26
-
27
- <script>
28
-
29
- var ctx = document.getElementById('myChart').getContext('2d')
30
-
31
- var myChart = new Chart(ctx, {
32
-
33
- type: 'pie',
34
-
35
- data: {
36
-
37
- labels: ["M", "T", "W", "T", "F", "S", "S"],
38
-
39
- datasets: [{
40
-
41
- backgroundColor: [
42
-
43
- "#2ecc71",
44
-
45
- "#3498db",
46
-
47
- "#95a5a6",
48
-
49
- "#9b59b6",
50
-
51
- "#f1c40f",
52
-
53
- "#e74c3c",
54
-
55
- "#34495e"
56
-
57
- ],
58
-
59
- data: [12, 19, 3, 17, 28, 24, 7]
60
-
61
- }]
62
-
63
- }
64
-
65
- })
66
-
67
- </script>
13
+ ```<!DOCTYPE HTML>
14
+
15
+ <html>
16
+
17
+ <head>
18
+
19
+ <meta charset="utf-8">
20
+
21
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
22
+
23
+ <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
24
+
25
+ <script src="components/loader.js"></script>
26
+
27
+ <script src="lib/onsenui/js/onsenui.min.js"></script>
28
+
29
+
30
+
31
+ <link rel="stylesheet" href="components/loader.css">
32
+
33
+ <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
34
+
35
+ <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
36
+
37
+ <link rel="stylesheet" href="css/style.css">
38
+
39
+ <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
40
+
41
+
42
+
43
+ <script>
44
+
45
+ // Page init event
46
+
47
+ document.addEventListener('init', function(event) {
48
+
49
+ var page = event.target;
50
+
51
+
52
+
53
+ if (page.matches('#first-page')) {
54
+
55
+
56
+
57
+ page.querySelector('#push-button').onclick = function() {
58
+
59
+ document.querySelector('#navigator').pushPage('page2.html');
60
+
61
+ };
62
+
63
+
64
+
65
+ } else if (page.matches('#second-page')) {
66
+
67
+
68
+
69
+ page.querySelector('#pop-button').onclick = function() {
70
+
71
+ document.querySelector('#navigator').popPage();
72
+
73
+ };
74
+
75
+
76
+
77
+ }
78
+
79
+ });
80
+
81
+ </script>
82
+
83
+ </head>
84
+
85
+
86
+
87
+ <body>
88
+
89
+ <ons-navigator id="navigator" page="page1.html"></ons-navigator>
90
+
91
+
92
+
93
+ <ons-template id="page1.html">
94
+
95
+ <ons-page id="first-page">
96
+
97
+ <ons-toolbar>
98
+
99
+ <div class = "center">
100
+
101
+ page1
102
+
103
+ </div>
104
+
105
+ </ons-toolbar>
106
+
107
+
108
+
109
+ <div class="content">
110
+
111
+ <div class="center">
112
+
113
+ <span>
114
+
115
+ <br>
116
+
117
+ <br>
118
+
119
+ <div>
120
+
121
+ <input id="text" class="text-input text-input--material" placeholder="1" type="text" required>
122
+
123
+ <select name="example" id = "select">
124
+
125
+ <option value="サンプル1">5時</option>
126
+
127
+ <option value="サンプル2">5時半</option>
128
+
129
+ <option value="サンプル3">6時</option>
130
+
131
+ <option value="サンプル4">6時半</option>
132
+
133
+ <option value="サンプル5">7時</option>
134
+
135
+ <option value="サンプル6">7時半</option>
136
+
137
+ <option value="サンプル7">8時</option>
138
+
139
+ <option value="サンプル8">8時半</option>
140
+
141
+ <option value="サンプル9">9時</option>
142
+
143
+ <option value="サンプル10">9時半</option>
144
+
145
+ <option value="サンプル11">10時</option>
146
+
147
+ <option value="サンプル12">10時半</option>
148
+
149
+ <option value="サンプル13">11時</option>
150
+
151
+ <option value="サンプル14">11時半</option>
152
+
153
+ </select></div>
154
+
155
+
156
+
157
+ <br />
158
+
159
+ <div>
160
+
161
+ <input id="aaa" class="text-input text-input--material" placeholder="2" type="password" required>
162
+
163
+ <select name="example" id = "select">
164
+
165
+ <option value="サンプル1">5時</option>
166
+
167
+ <option value="サンプル2">5時半</option>
168
+
169
+ <option value="サンプル3">6時</option>
170
+
171
+ <option value="サンプル4">6時半</option>
172
+
173
+ <option value="サンプル5">7時</option>
174
+
175
+ <option value="サンプル6">7時半</option>
176
+
177
+ <option value="サンプル7">8時</option>
178
+
179
+ <option value="サンプル8">8時半</option>
180
+
181
+ <option value="サンプル9">9時</option>
182
+
183
+ <option value="サンプル10">9時半</option>
184
+
185
+ <option value="サンプル11">10時</option>
186
+
187
+ <option value="サンプル12">10時半</option>
188
+
189
+ <option value="サンプル13">11時</option>
190
+
191
+ <option value="サンプル14">11時半</option>
192
+
193
+ </select></div>
194
+
195
+ <br>
196
+
197
+ <div>
198
+
199
+ <input id="bbb" class="text-input text-input--material" placeholder="3" type="etc" required>
200
+
201
+ <select name="example" id = "select">
202
+
203
+ <option value="サンプル1">5時</option>
204
+
205
+ <option value="サンプル2">5時半</option>
206
+
207
+ <option value="サンプル3">6時</option>
208
+
209
+ <option value="サンプル4">6時半</option>
210
+
211
+ <option value="サンプル5">7時</option>
212
+
213
+ <option value="サンプル6">7時半</option>
214
+
215
+ <option value="サンプル7">8時</option>
216
+
217
+ <option value="サンプル8">8時半</option>
218
+
219
+ <option value="サンプル9">9時</option>
220
+
221
+ <option value="サンプル10">9時半</option>
222
+
223
+ <option value="サンプル11">10時</option>
224
+
225
+ <option value="サンプル12">10時半</option>
226
+
227
+ <option value="サンプル13">11時</option>
228
+
229
+ <option value="サンプル14">11時半</option>
230
+
231
+ </select> </div>
232
+
233
+ </span>
234
+
235
+
236
+
237
+
238
+
239
+
240
+
241
+
242
+
243
+
244
+
245
+ <div class = "push-button">
246
+
247
+ <ons-button id="push-button">作成<i class="far fa-hand-point-right"></i></ons-button>
248
+
249
+ </div>
250
+
251
+ </ons-page>
252
+
253
+ </ons-template>
254
+
255
+
256
+
257
+ <!-- Page2 -->
258
+
259
+ <ons-template id="page2.html">
260
+
261
+ <ons-page id="second-page">
262
+
263
+
264
+
265
+ <ons-toolbar>
266
+
267
+ <div class="left"><ons-back-button> </ons-back-button></div>
268
+
269
+ <div class="center">Page 2</div>
270
+
271
+ </ons-toolbar>
272
+
273
+
274
+
275
+ <div class="content" style="text-align: center">
276
+
277
+ <p>This is the second page.</p>
278
+
279
+ <ons-button id="pop-button" class = ""> </ons-button>
280
+
281
+ </div>
282
+
283
+
284
+
285
+ <canvas id="myChart"></canvas>
286
+
287
+
288
+
289
+ <script src="node_modules/chart.js/dist/Chart.min.js"></script>
290
+
291
+ <script>
292
+
293
+ var ctx = document.getElementById('myChart').getContext('2d')
294
+
295
+ var myChart = new Chart(ctx, {
296
+
297
+ type: 'pie',
298
+
299
+ data: {
300
+
301
+ labels: ["M", "T", "W", "T", "F", "S", "S"],
302
+
303
+ datasets: [{
304
+
305
+ backgroundColor: [
306
+
307
+ "#2ecc71",
308
+
309
+ "#3498db",
310
+
311
+ "#95a5a6",
312
+
313
+ "#9b59b6",
314
+
315
+ "#f1c40f",
316
+
317
+ "#e74c3c",
318
+
319
+ "#34495e"
320
+
321
+ ],
322
+
323
+ data: [12, 19, 3, 17, 28, 24, 7]
324
+
325
+ }]
326
+
327
+ }
328
+
329
+ })
330
+
331
+ </script>
332
+
333
+
334
+
335
+
336
+
337
+ </ons-page>
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+
354
+
355
+
356
+
357
+
358
+
359
+
360
+
361
+
362
+
363
+
364
+
365
+ </body>
366
+
367
+ </html>
68
368
 
69
369
  ```

2

テスト

2018/02/09 06:56

投稿

rrrrrr
rrrrrr

スコア6

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,59 @@
11
11
 
12
12
 
13
13
  ![イメージ説明](8a8db5151f4bed2506d1d6e86afdc725.png)![イメージ説明](1b60a3c1ce705a2836a7c1a6ed30de95.png)![イメージ説明](927620ac693c6c134d936d3e57d52047.png)![イメージ説明](493714b17e68680b5f7d93aa5c5a7988.png)![イメージ説明](fa0bbeb89873e6b2d672674ab22dd512.png)![イメージ説明](764f4a5a9248143867392749c0b71778.png)
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+ ``` <canvas id="myChart"></canvas>
22
+
23
+
24
+
25
+ <script src="node_modules/chart.js/dist/Chart.min.js"></script>
26
+
27
+ <script>
28
+
29
+ var ctx = document.getElementById('myChart').getContext('2d')
30
+
31
+ var myChart = new Chart(ctx, {
32
+
33
+ type: 'pie',
34
+
35
+ data: {
36
+
37
+ labels: ["M", "T", "W", "T", "F", "S", "S"],
38
+
39
+ datasets: [{
40
+
41
+ backgroundColor: [
42
+
43
+ "#2ecc71",
44
+
45
+ "#3498db",
46
+
47
+ "#95a5a6",
48
+
49
+ "#9b59b6",
50
+
51
+ "#f1c40f",
52
+
53
+ "#e74c3c",
54
+
55
+ "#34495e"
56
+
57
+ ],
58
+
59
+ data: [12, 19, 3, 17, 28, 24, 7]
60
+
61
+ }]
62
+
63
+ }
64
+
65
+ })
66
+
67
+ </script>
68
+
69
+ ```

1

わかりづらく申し訳ありません。画像追加いたしました。

2018/02/09 06:52

投稿

rrrrrr
rrrrrr

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,4 +10,4 @@
10
10
 
11
11
 
12
12
 
13
- ![![イメージ説明](6929171796afdf36ad95b4d0e3e3f2a1.png)](d6a80fb3fe7c5b9144ee8cfb1636fed7.png)
13
+ ![イメージ説明](8a8db5151f4bed2506d1d6e86afdc725.png)![イメージ説明](1b60a3c1ce705a2836a7c1a6ed30de95.png)![イメージ説明](927620ac693c6c134d936d3e57d52047.png)![イメージ説明](493714b17e68680b5f7d93aa5c5a7988.png)![イメージ説明](fa0bbeb89873e6b2d672674ab22dd512.png)![イメージ説明](764f4a5a9248143867392749c0b71778.png)