質問編集履歴

1

ソースコードを入れました

2021/03/04 07:49

投稿

ma_sa_T
ma_sa_T

スコア0

test CHANGED
File without changes
test CHANGED
@@ -20,701 +20,699 @@
20
20
 
21
21
  エラーメッセージ
22
22
 
23
+ ```なし
24
+
25
+
26
+
27
+ ### 該当のソースコード
28
+
29
+
30
+
31
+ ```html
32
+
33
+ <?php
34
+
35
+ include 'conn.php';
36
+
37
+ include 'insert.php';
38
+
39
+ ?>
40
+
41
+ <!DOCTYPE html>
42
+
43
+ <html lang="ja">
44
+
45
+ <head>
46
+
47
+ <link rel="stylesheet" href="example.css">
48
+
49
+ <meta charset="utf-8">
50
+
51
+ <title>タンパクっと</title>
52
+
53
+
54
+
55
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
56
+
57
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
58
+
59
+
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+ <h1>たんぱくっと</h1>
66
+
67
+ <h2>本日は<?php echo (int)$goukei; ?>グラム摂取しています</h2>
68
+
69
+ <br></br>
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+ <div class="aaaa">
80
+
81
+
82
+
83
+
84
+
85
+ <!--非表示ここから-->
86
+
87
+ <div class="aaaaa">
88
+
89
+ <table class="momoyama-table">
90
+
91
+ <thead>
92
+
93
+
94
+
95
+ <tr><th class="midasi1">食品</th><th class="midasi2">タンパク質</th><th class="midasi3">選択数</th></tr>
96
+
97
+ </thead>
98
+
99
+ <?php
100
+
101
+ //配列$products
102
+
103
+ foreach($products as $p){
104
+
105
+ $id = $p['id'];
106
+
107
+ $name = $p['food_name'];
108
+
109
+ $protein = $p['protein'];
110
+
111
+ $order = $p['order_quantity'];
112
+
113
+ //表を生成して選択に合わせてidを送信
114
+
115
+ echo "<tr><td><a href='product.php?id={$id}'>{$name}</a></td><td>{$protein}グラム</td><td>{$order}個</td></tr>";
116
+
117
+ }
118
+
119
+ ?>
120
+
121
+ </table>
122
+
123
+ </div>
124
+
125
+ <!--ここまで-->
126
+
127
+ <div class="dounatu">
128
+
129
+ <form action="index.php" method="post">
130
+
131
+ <div class="sousa">
132
+
133
+ <button class="btn-social-circle btn-social-circle--hatebu">
134
+
135
+ <img src="touroku.png" alt="海の写真" name="add" title="登録" width="40" height="30" >
136
+
137
+ </button>
138
+
139
+ <button class="btn-social-circle btn-social-circle--pocket">
140
+
141
+ <img src="gomi.png" alt="海の写真" title="削除"  width="50" height="30">
142
+
143
+ </button>
144
+
145
+ <button class="btn-social-circle btn-social-circle--feedly">
146
+
147
+ <img src="reload.png" alt="海の写真" name="update" title="更新"  width="40" height="30">
148
+
149
+ </button>
150
+
151
+ </form>
152
+
153
+ </div>
154
+
155
+
156
+
157
+ <!-- ドーナツチャート読み込み -->
158
+
159
+ <canvas id="myPieChart"></canvas>
160
+
161
+ <div id = pie-chart></div>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+
168
+
169
+
170
+
171
+
172
+
173
+
174
+
175
+ <?php
176
+
177
+
178
+
179
+ foreach($total_products as $p){
180
+
181
+
182
+
183
+ $sum = $sum . '"'. $p['sum'].'",';
184
+
185
+ $time = $time . '"'. $p['time'] .'",';
186
+
187
+ }
188
+
189
+ //更新ボタン
190
+
191
+ if(isset($_POST['add'])) {
192
+
193
+ echo "";
194
+
195
+ } else if(isset($_POST['update'])) {
196
+
197
+ try
198
+
199
+ {
200
+
201
+ // db接続
202
+
203
+ $db = new PDO(PDO_DSN, DB_USERNAME, DB_PASSWORD);
204
+
205
+ $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
206
+
207
+ //
208
+
209
+ $db->exec("UPDATE `food_products` SET `order_quantity`=0 WHERE 1"); //注文数を0にリセット
210
+
211
+ //$db->exec("SELECT * FROM `chart` WHERE date_time = (SELECT MAX(date_time) FROM chart)");
212
+
213
+ //$db->exec("UPDATE `chart` SET `total`= 0 WHERE 1");
214
+
215
+ }
216
+
217
+ catch(PDOException $e)
218
+
219
+ {
220
+
221
+ $error = $e->getMessage();
222
+
223
+ exit;
224
+
225
+ }
226
+
227
+
228
+
229
+ } else {
230
+
231
+ echo "";
232
+
233
+ }
234
+
235
+ ?>
236
+
237
+
238
+
239
+ <script>
240
+
241
+ var total_protein = <?php echo (int)$goukei ?>;
242
+
243
+ function pie(){
244
+
245
+ if(total_protein <= 65){
246
+
247
+ var value = `本日は残り${65 - total_protein}グラムです`;
248
+
249
+ }else{
250
+
251
+ var value = "本日のノルマは完了しています"
252
+
253
+ }
254
+
255
+ document.getElementById('pie-chart').innerHTML = value ;
256
+
257
+ }
258
+
259
+ pie();
260
+
261
+
262
+
263
+ var blue = '#FFFF00';
264
+
265
+ var gray = 'rgb(99, 99, 99)';
266
+
267
+ var ctx = document.getElementById("myPieChart");
268
+
269
+ var myPieChart = new Chart(ctx, {
270
+
271
+ type: 'doughnut',
272
+
273
+ data: {
274
+
275
+ datasets: [{
276
+
277
+ backgroundColor: [blue, gray],
278
+
279
+ data: [total_protein,65-total_protein]
280
+
281
+ }]
282
+
283
+ },
284
+
285
+ options: {
286
+
287
+ title: {
288
+
289
+
290
+
291
+ }
292
+
293
+ }
294
+
295
+ });
296
+
297
+ </script>
298
+
299
+
300
+
301
+ <h2>直近一週間のグラフ</h2>
302
+
303
+
304
+
305
+ <!--棒グラフの表示-->
306
+
307
+ <div class="bar">
308
+
309
+
310
+
311
+ <div class="chart-container" style="position: relative; width: 950px; height: 700px;">
312
+
313
+ <canvas id="myLineChart">ここにチャート表示</canvas>
314
+
315
+ </div>
316
+
317
+ <script>
318
+
319
+ //.getContext('2d');はcanvasでグラフとか描画するために使う
320
+
321
+ var cty = document.getElementById("myLineChart").getContext('2d');
322
+
323
+ var myLineChart = new Chart(cty, {
324
+
325
+ type: 'bar',
326
+
327
+ data: {
328
+
329
+ labels: [<?php echo $time ?>],//各棒の名前(name)
330
+
331
+ datasets: [
332
+
333
+ {
334
+
335
+ label: '直近一週間のタンパク質摂取量',
336
+
337
+ data: [<?php echo $sum ?>],//各縦棒の高さ(値段)
338
+
339
+
340
+
341
+ backgroundColor:[
342
+
343
+ "rgba(255, 99, 132, 0.2)",
344
+
345
+ "rgba(255, 159, 64, 0.2)",
346
+
347
+ "rgba(255, 205, 86, 0.2)",
348
+
349
+ "rgba(75, 192, 192, 0.2)",
350
+
351
+ "rgba(54, 162, 235, 0.2)",
352
+
353
+ "rgba(153, 102, 255, 0.2)",
354
+
355
+ "rgba(201, 203, 207, 0.2)"
356
+
357
+ ],
358
+
359
+ borderColor: [
360
+
361
+ "rgb(255, 99, 132)",
362
+
363
+ "rgb(255, 159, 64)",
364
+
365
+ "rgb(255, 205, 86)",
366
+
367
+ "rgb(75, 192, 192)",
368
+
369
+ "rgb(54, 162, 235)",
370
+
371
+ "rgb(153, 102, 255)",
372
+
373
+ "rgb(201, 203, 207)"
374
+
375
+ ],
376
+
377
+ }
378
+
379
+ ],
380
+
381
+ },
382
+
383
+ options: {
384
+
385
+ chartArea: {
386
+
387
+ backgroundColor: 'white'
388
+
389
+ },
390
+
391
+ scales: {
392
+
393
+ xAxes: [{
394
+
395
+ id : 'x軸',
396
+
397
+ ticks: {
398
+
399
+ autoSkip: true,
400
+
401
+ maxTicksLimit: 7 // 最大表示数
402
+
403
+ }
404
+
405
+ }],
406
+
407
+ yAxes: [{
408
+
409
+ id : 'y軸',
410
+
411
+ }]
412
+
413
+ },
414
+
415
+ annotation: {
416
+
417
+ annotations: [
418
+
419
+ {
420
+
421
+ type: 'line', // 線分を指定
422
+
423
+ drawTime: 'afterDatasetsDraw',
424
+
425
+ id: 'a-line-1', // 線のid名を指定(他の線と区別するため)
426
+
427
+ mode: 'horizontal', // 水平を指定
428
+
429
+ scaleID: 'y軸', // 基準とする軸のid名
430
+
431
+ value: 65.0, // 引きたい線の数値(始点)
432
+
433
+ endValue: 65.0, // 引きたい線の数値(終点)
434
+
435
+ borderColor: 'red', // 線の色
436
+
437
+ borderWidth: 3, // 線の幅(太さ)
438
+
439
+ borderDash: [2, 2],
440
+
441
+ borderDashOffset: 1,
442
+
443
+ label: { // ラベルの設定
444
+
445
+ backgroundColor: 'rgba(255,255,255,0.8)',
446
+
447
+ bordercolor: 'rgba(200,60,60,0.8)',
448
+
449
+ borderwidth: 2,
450
+
451
+ fontSize: 10,
452
+
453
+ fontStyle: 'bold',
454
+
455
+ fontColor: 'rgba(200,60,60,0.8)',
456
+
457
+ xPadding: 10,
458
+
459
+ yPadding: 10,
460
+
461
+ cornerRadius: 3,
462
+
463
+ position: 'left',
464
+
465
+ xAdjust: 0,
466
+
467
+ yAdjust: 0,
468
+
469
+ enabled: true,
470
+
471
+ content: '1日の目標摂取量[タンパク質]'
472
+
473
+ }
474
+
475
+ },
476
+
477
+
478
+
479
+ ]
480
+
481
+ }
482
+
483
+ }
484
+
485
+ });
486
+
487
+
488
+
489
+
490
+
491
+ /*
492
+
493
+ // グラフオプションの title 指定を削除しただけです
494
+
495
+ (function() {
496
+
497
+ var blue = 'rgb(54, 162, 235)';
498
+
499
+ var gray = 'rgb(99, 99, 99)';
500
+
501
+
502
+
503
+ //円グラフの中身の割合
504
+
505
+ var data = {
506
+
507
+ datasets: [{
508
+
509
+ data: [total_protein,65-total_protein],
510
+
511
+ backgroundColor: [blue, gray],
512
+
513
+ }],
514
+
515
+ };
516
+
517
+
518
+
519
+ // 文字列に変換
520
+
521
+ //var dataString = dataset.data[index].toString();
522
+
523
+
524
+
525
+ // 文字の配置( "0" のときは配置しない)
526
+
527
+ // if( dataString!=="0" ) {
528
+
529
+ // ctx.textAlign = 'center';
530
+
531
+ // ctx.textBaseline = 'middle';
532
+
533
+ // var padding = 5;
534
+
535
+ // var position = element.tooltipPosition();
536
+
537
+ // ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
538
+
539
+ // }
540
+
541
+
542
+
543
+
544
+
545
+ // グラフオプション
546
+
547
+ var options = {
548
+
549
+ // グラフの太さ(中央部分を何%切り取るか)
550
+
551
+ cutoutPercentage: 65,
552
+
553
+ // 凡例を表示しない
554
+
555
+ legend: { display: false },
556
+
557
+ // 自動サイズ変更をしない
558
+
559
+ responsive: false,
560
+
561
+ title: {
562
+
563
+ display: true,
564
+
565
+ fontSize: 16,
566
+
567
+ text: 'baka',
568
+
569
+ },
570
+
571
+ // マウスオーバー時に情報を表示しない
572
+
573
+ tooltips: { enabled: true },
574
+
575
+ };
576
+
577
+
578
+
579
+
580
+
581
+
582
+
583
+
584
+
585
+ // グラフ描画
586
+
587
+ var ctx = document.getElementById('chart-area').getContext('2d');
588
+
589
+ new Chart(ctx, {
590
+
591
+ type: 'doughnut',
592
+
593
+ data: data,
594
+
595
+ options: options
596
+
597
+ });
598
+
599
+ })();
600
+
601
+
602
+
603
+ var chartJsPluginCenterLabel = {
604
+
605
+ labelShown: false,
606
+
607
+
608
+
609
+ afterRender: function (chart) {
610
+
611
+ // afterRender は何度も実行されるので、2回目以降は処理しない
612
+
613
+ if (this.labelShown) {
614
+
615
+ return;
616
+
617
+ }
618
+
619
+ this.labelShown = true;
620
+
621
+ // ラベルの HTML
622
+
623
+ //数値挿入
624
+
625
+
626
+
627
+ /*if(x <= 65){
628
+
629
+ console.log(`本日は残り${65 - x}グラムです`);
630
+
631
+ }else{
632
+
633
+ console.log("本日のノルマは達成されています")
634
+
635
+ }
636
+
637
+
638
+
639
+
640
+
641
+ //円グラフの中の条件分岐
642
+
643
+ if(total_protein <= 65){
644
+
645
+ var value = `本日は残り${65 - total_protein}グラムです`;
646
+
647
+ }else{
648
+
649
+ var value = "本日のノルマは完了しています"
650
+
651
+ }
652
+
653
+
654
+
655
+ var labelBox = document.createElement('div');
656
+
657
+ labelBox.classList.add('label-box');
658
+
659
+ labelBox.innerHTML = '<div class="label">'
660
+
661
+ + value
662
+
663
+ + '<span class="per">%</span>'
664
+
665
+ + '</div>';
666
+
667
+ };
668
+
669
+
670
+
671
+ // 上記プラグインの有効化
672
+
673
+ Chart.plugins.register(chartJsPluginCenterLabel);*/
674
+
675
+
676
+
677
+ </script>
678
+
679
+
680
+
681
+
682
+
683
+
684
+
685
+ <!-- <form action="index.php" method="post">
686
+
687
+
688
+
689
+ <button type="submit" name="add">登録</button>
690
+
691
+ <button type="submit" name="update">更新</button>
692
+
693
+ <button type="submit" name="remove">削除</button>
694
+
695
+ </form>
696
+
697
+ -->
698
+
699
+ </body>
700
+
701
+ </html>
702
+
703
+
704
+
705
+ ソースコード
706
+
23
707
  ```
24
708
 
25
709
 
26
710
 
27
- ### 該当のソースコード
28
-
29
-
30
-
31
- ```html
32
-
33
- ソースコード
34
-
35
- ```
36
-
37
-
38
-
39
- <?php
40
-
41
- include 'conn.php';
42
-
43
- include 'insert.php';
44
-
45
- ?>
46
-
47
- <!DOCTYPE html>
48
-
49
- <html lang="ja">
50
-
51
- <head>
52
-
53
- <link rel="stylesheet" href="example.css">
54
-
55
- <meta charset="utf-8">
56
-
57
- <title>タンパクっと</title>
58
-
59
-
60
-
61
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
62
-
63
- <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
64
-
65
-
66
-
67
- </head>
68
-
69
- <body>
70
-
71
- <h1>たんぱくっと</h1>
72
-
73
- <h2>本日は<?php echo (int)$goukei; ?>グラム摂取しています</h2>
74
-
75
- <br></br>
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
- <div class="aaaa">
86
-
87
-
88
-
89
-
90
-
91
- <!--非表示ここから-->
92
-
93
- <div class="aaaaa">
94
-
95
- <table class="momoyama-table">
96
-
97
- <thead>
98
-
99
-
100
-
101
- <tr><th class="midasi1">食品</th><th class="midasi2">タンパク質</th><th class="midasi3">選択数</th></tr>
102
-
103
- </thead>
104
-
105
- <?php
106
-
107
- //配列$products
108
-
109
- foreach($products as $p){
110
-
111
- $id = $p['id'];
112
-
113
- $name = $p['food_name'];
114
-
115
- $protein = $p['protein'];
116
-
117
- $order = $p['order_quantity'];
118
-
119
- //表を生成して選択に合わせてidを送信
120
-
121
- echo "<tr><td><a href='product.php?id={$id}'>{$name}</a></td><td>{$protein}グラム</td><td>{$order}個</td></tr>";
122
-
123
- }
124
-
125
- ?>
126
-
127
- </table>
128
-
129
- </div>
130
-
131
- <!--ここまで-->
132
-
133
- <div class="dounatu">
134
-
135
- <form action="index.php" method="post">
136
-
137
- <div class="sousa">
138
-
139
- <button class="btn-social-circle btn-social-circle--hatebu">
140
-
141
- <img src="touroku.png" alt="海の写真" name="add" title="登録" width="40" height="30" >
142
-
143
- </button>
144
-
145
- <button class="btn-social-circle btn-social-circle--pocket">
146
-
147
- <img src="gomi.png" alt="海の写真" title="削除"  width="50" height="30">
148
-
149
- </button>
150
-
151
- <button class="btn-social-circle btn-social-circle--feedly">
152
-
153
- <img src="reload.png" alt="海の写真" name="update" title="更新"  width="40" height="30">
154
-
155
- </button>
156
-
157
- </form>
158
-
159
- </div>
160
-
161
-
162
-
163
- <!-- ドーナツチャート読み込み -->
164
-
165
- <canvas id="myPieChart"></canvas>
166
-
167
- <div id = pie-chart></div>
168
-
169
- </div>
170
-
171
- </div>
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
- <?php
182
-
183
-
184
-
185
- foreach($total_products as $p){
186
-
187
-
188
-
189
- $sum = $sum . '"'. $p['sum'].'",';
190
-
191
- $time = $time . '"'. $p['time'] .'",';
192
-
193
- }
194
-
195
- //更新ボタン
196
-
197
- if(isset($_POST['add'])) {
198
-
199
- echo "";
200
-
201
- } else if(isset($_POST['update'])) {
202
-
203
- try
204
-
205
- {
206
-
207
- // db接続
208
-
209
- $db = new PDO(PDO_DSN, DB_USERNAME, DB_PASSWORD);
210
-
211
- $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
212
-
213
- //
214
-
215
- $db->exec("UPDATE `food_products` SET `order_quantity`=0 WHERE 1"); //注文数を0にリセット
216
-
217
- //$db->exec("SELECT * FROM `chart` WHERE date_time = (SELECT MAX(date_time) FROM chart)");
218
-
219
- //$db->exec("UPDATE `chart` SET `total`= 0 WHERE 1");
220
-
221
- }
222
-
223
- catch(PDOException $e)
224
-
225
- {
226
-
227
- $error = $e->getMessage();
228
-
229
- exit;
230
-
231
- }
232
-
233
-
234
-
235
- } else {
236
-
237
- echo "";
238
-
239
- }
240
-
241
- ?>
242
-
243
-
244
-
245
- <script>
246
-
247
- var total_protein = <?php echo (int)$goukei ?>;
248
-
249
- function pie(){
250
-
251
- if(total_protein <= 65){
252
-
253
- var value = `本日は残り${65 - total_protein}グラムです`;
254
-
255
- }else{
256
-
257
- var value = "本日のノルマは完了しています"
258
-
259
- }
260
-
261
- document.getElementById('pie-chart').innerHTML = value ;
262
-
263
- }
264
-
265
- pie();
266
-
267
-
268
-
269
- var blue = '#FFFF00';
270
-
271
- var gray = 'rgb(99, 99, 99)';
272
-
273
- var ctx = document.getElementById("myPieChart");
274
-
275
- var myPieChart = new Chart(ctx, {
276
-
277
- type: 'doughnut',
278
-
279
- data: {
280
-
281
- datasets: [{
282
-
283
- backgroundColor: [blue, gray],
284
-
285
- data: [total_protein,65-total_protein]
286
-
287
- }]
288
-
289
- },
290
-
291
- options: {
292
-
293
- title: {
294
-
295
-
296
-
297
- }
298
-
299
- }
300
-
301
- });
302
-
303
- </script>
304
-
305
-
306
-
307
- <h2>直近一週間のグラフ</h2>
308
-
309
-
310
-
311
- <!--棒グラフの表示-->
312
-
313
- <div class="bar">
314
-
315
-
316
-
317
- <div class="chart-container" style="position: relative; width: 950px; height: 700px;">
318
-
319
- <canvas id="myLineChart">ここにチャート表示</canvas>
320
-
321
- </div>
322
-
323
- <script>
324
-
325
- //.getContext('2d');はcanvasでグラフとか描画するために使う
326
-
327
- var cty = document.getElementById("myLineChart").getContext('2d');
328
-
329
- var myLineChart = new Chart(cty, {
330
-
331
- type: 'bar',
332
-
333
- data: {
334
-
335
- labels: [<?php echo $time ?>],//各棒の名前(name)
336
-
337
- datasets: [
338
-
339
- {
340
-
341
- label: '直近一週間のタンパク質摂取量',
342
-
343
- data: [<?php echo $sum ?>],//各縦棒の高さ(値段)
344
-
345
-
346
-
347
- backgroundColor:[
348
-
349
- "rgba(255, 99, 132, 0.2)",
350
-
351
- "rgba(255, 159, 64, 0.2)",
352
-
353
- "rgba(255, 205, 86, 0.2)",
354
-
355
- "rgba(75, 192, 192, 0.2)",
356
-
357
- "rgba(54, 162, 235, 0.2)",
358
-
359
- "rgba(153, 102, 255, 0.2)",
360
-
361
- "rgba(201, 203, 207, 0.2)"
362
-
363
- ],
364
-
365
- borderColor: [
366
-
367
- "rgb(255, 99, 132)",
368
-
369
- "rgb(255, 159, 64)",
370
-
371
- "rgb(255, 205, 86)",
372
-
373
- "rgb(75, 192, 192)",
374
-
375
- "rgb(54, 162, 235)",
376
-
377
- "rgb(153, 102, 255)",
378
-
379
- "rgb(201, 203, 207)"
380
-
381
- ],
382
-
383
- }
384
-
385
- ],
386
-
387
- },
388
-
389
- options: {
390
-
391
- chartArea: {
392
-
393
- backgroundColor: 'white'
394
-
395
- },
396
-
397
- scales: {
398
-
399
- xAxes: [{
400
-
401
- id : 'x軸',
402
-
403
- ticks: {
404
-
405
- autoSkip: true,
406
-
407
- maxTicksLimit: 7 // 最大表示数
408
-
409
- }
410
-
411
- }],
412
-
413
- yAxes: [{
414
-
415
- id : 'y軸',
416
-
417
- }]
418
-
419
- },
420
-
421
- annotation: {
422
-
423
- annotations: [
424
-
425
- {
426
-
427
- type: 'line', // 線分を指定
428
-
429
- drawTime: 'afterDatasetsDraw',
430
-
431
- id: 'a-line-1', // 線のid名を指定(他の線と区別するため)
432
-
433
- mode: 'horizontal', // 水平を指定
434
-
435
- scaleID: 'y軸', // 基準とする軸のid名
436
-
437
- value: 65.0, // 引きたい線の数値(始点)
438
-
439
- endValue: 65.0, // 引きたい線の数値(終点)
440
-
441
- borderColor: 'red', // 線の色
442
-
443
- borderWidth: 3, // 線の幅(太さ)
444
-
445
- borderDash: [2, 2],
446
-
447
- borderDashOffset: 1,
448
-
449
- label: { // ラベルの設定
450
-
451
- backgroundColor: 'rgba(255,255,255,0.8)',
452
-
453
- bordercolor: 'rgba(200,60,60,0.8)',
454
-
455
- borderwidth: 2,
456
-
457
- fontSize: 10,
458
-
459
- fontStyle: 'bold',
460
-
461
- fontColor: 'rgba(200,60,60,0.8)',
462
-
463
- xPadding: 10,
464
-
465
- yPadding: 10,
466
-
467
- cornerRadius: 3,
468
-
469
- position: 'left',
470
-
471
- xAdjust: 0,
472
-
473
- yAdjust: 0,
474
-
475
- enabled: true,
476
-
477
- content: '1日の目標摂取量[タンパク質]'
478
-
479
- }
480
-
481
- },
482
-
483
-
484
-
485
- ]
486
-
487
- }
488
-
489
- }
490
-
491
- });
492
-
493
-
494
-
495
-
496
-
497
- /*
498
-
499
- // グラフオプションの title 指定を削除しただけです
500
-
501
- (function() {
502
-
503
- var blue = 'rgb(54, 162, 235)';
504
-
505
- var gray = 'rgb(99, 99, 99)';
506
-
507
-
508
-
509
- //円グラフの中身の割合
510
-
511
- var data = {
512
-
513
- datasets: [{
514
-
515
- data: [total_protein,65-total_protein],
516
-
517
- backgroundColor: [blue, gray],
518
-
519
- }],
520
-
521
- };
522
-
523
-
524
-
525
- // 文字列に変換
526
-
527
- //var dataString = dataset.data[index].toString();
528
-
529
-
530
-
531
- // 文字の配置( "0" のときは配置しない)
532
-
533
- // if( dataString!=="0" ) {
534
-
535
- // ctx.textAlign = 'center';
536
-
537
- // ctx.textBaseline = 'middle';
538
-
539
- // var padding = 5;
540
-
541
- // var position = element.tooltipPosition();
542
-
543
- // ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
544
-
545
- // }
546
-
547
-
548
-
549
-
550
-
551
- // グラフオプション
552
-
553
- var options = {
554
-
555
- // グラフの太さ(中央部分を何%切り取るか)
556
-
557
- cutoutPercentage: 65,
558
-
559
- // 凡例を表示しない
560
-
561
- legend: { display: false },
562
-
563
- // 自動サイズ変更をしない
564
-
565
- responsive: false,
566
-
567
- title: {
568
-
569
- display: true,
570
-
571
- fontSize: 16,
572
-
573
- text: 'baka',
574
-
575
- },
576
-
577
- // マウスオーバー時に情報を表示しない
578
-
579
- tooltips: { enabled: true },
580
-
581
- };
582
-
583
-
584
-
585
-
586
-
587
-
588
-
589
-
590
-
591
- // グラフ描画
592
-
593
- var ctx = document.getElementById('chart-area').getContext('2d');
594
-
595
- new Chart(ctx, {
596
-
597
- type: 'doughnut',
598
-
599
- data: data,
600
-
601
- options: options
602
-
603
- });
604
-
605
- })();
606
-
607
-
608
-
609
- var chartJsPluginCenterLabel = {
610
-
611
- labelShown: false,
612
-
613
-
614
-
615
- afterRender: function (chart) {
616
-
617
- // afterRender は何度も実行されるので、2回目以降は処理しない
618
-
619
- if (this.labelShown) {
620
-
621
- return;
622
-
623
- }
624
-
625
- this.labelShown = true;
626
-
627
- // ラベルの HTML
628
-
629
- //数値挿入
630
-
631
-
632
-
633
- /*if(x <= 65){
634
-
635
- console.log(`本日は残り${65 - x}グラムです`);
636
-
637
- }else{
638
-
639
- console.log("本日のノルマは達成されています")
640
-
641
- }
642
-
643
-
644
-
645
-
646
-
647
- //円グラフの中の条件分岐
648
-
649
- if(total_protein <= 65){
650
-
651
- var value = `本日は残り${65 - total_protein}グラムです`;
652
-
653
- }else{
654
-
655
- var value = "本日のノルマは完了しています"
656
-
657
- }
658
-
659
-
660
-
661
- var labelBox = document.createElement('div');
662
-
663
- labelBox.classList.add('label-box');
664
-
665
- labelBox.innerHTML = '<div class="label">'
666
-
667
- + value
668
-
669
- + '<span class="per">%</span>'
670
-
671
- + '</div>';
672
-
673
- };
674
-
675
-
676
-
677
- // 上記プラグインの有効化
678
-
679
- Chart.plugins.register(chartJsPluginCenterLabel);*/
680
-
681
-
682
-
683
- </script>
684
-
685
-
686
-
687
-
688
-
689
-
690
-
691
- <!-- <form action="index.php" method="post">
692
-
693
-
694
-
695
- <button type="submit" name="add">登録</button>
696
-
697
- <button type="submit" name="update">更新</button>
698
-
699
- <button type="submit" name="remove">削除</button>
700
-
701
- </form>
702
-
703
- -->
704
-
705
- </body>
706
-
707
- </html>
708
-
709
-
710
-
711
-
712
-
713
711
  ### 試したこと
714
712
 
715
713
 
716
714
 
717
- 空のクラスを作ってテーブルの中に入れそこからはみ出したものを表示させないようにしましたがそもそも表が表示されなくなりました。
715
+ 空のクラスを作ってテーブルの中に入れそこからはみ出したものを表示させないようにしましたがそもそも表が表示されなくなりました。
718
716
 
719
717
 
720
718