-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathresult_display.html
118 lines (92 loc) · 4.78 KB
/
result_display.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>健康ひつじ</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
<link rel="icon" href="hituzi_favicon.png" type="image/png">
</head>
<body>
<header class="header">
<h1><img src="hituzi_favicon.png" width="45" style="vertical-align: bottom;">健康ひつじ</h1>
<p>このサイトでは、ご自身の健康診断結果と、同じ性別・年代・都道府県の健康診断結果の分布を確認いただけます。</p>
</header>
<div class="container">
<h2>健康診断結果のサマリー</h2>
<div class="summary-part">
<div class="row image-row">
<p>高血圧</p>
<p>脂質異常症</p>
<p>糖尿病</p>
</div>
<div class="row image-row">
<img id="statusImageBloodPressure" src="" alt="血圧の健康ステータスの画像" class="img-fluid">
<img id="statusImageLipid" src="" alt="脂質の健康ステータスの画像" class="img-fluid">
<img id="statusImageDiabetes" src="" alt="血糖の健康ステータスの画像" class="img-fluid">
</div>
</div>
<h2>同じ属性の方の分布</h2>
<div id="comparisonMessage"></div>
<h3>高血圧に関する項目</h3>
<div class="container-item">
<h4>最大血圧</h4>
<p>最大血圧は、心臓が収縮して血液を全身に送り出すときの血圧です。高血圧のリスクを示す重要な指標です。</p>
<canvas id="収縮期血圧Histogram" width="400" height="200"></canvas>
</div>
<div class="container-item">
<h4>最小血圧</h4>
<p>最小血圧は、心臓が拡張して血液が心臓に戻るときの血圧です。健康を維持するためには、正常範囲を保つことが重要です。</p>
<canvas id="拡張期血圧Histogram" width="400" height="200"></canvas>
</div>
<div class="advice-container">
<img src="hituzi_advice.png" alt="Character" class="bubble-image">
<div class="advice-bubble">
<div id="advice_HBP"></div>
</div>
</div>
<h3>脂質異常症に関する項目</h3>
<div class="container-item">
<h4>HDL-C</h4>
<p>HDL-Cは、いわゆる「善玉コレステロール」で、血管内の余分なコレステロールを運び出します。正常値を維持することが重要です。</p>
<canvas id="HDL-CHistogram" width="400" height="200"></canvas>
</div>
<div class="container-item">
<h4>LDL-C</h4>
<p>LDL-Cは、「悪玉コレステロール」と呼ばれ、過剰になると動脈硬化のリスクが増加します。注意が必要です。</p>
<canvas id="LDL-CHistogram" width="400" height="200"></canvas>
</div>
<div class="container-item">
<h4>中性脂肪</h4>
<p>中性脂肪は、体に必要なエネルギー源ですが、過剰になると心疾患のリスクが高まります。</p>
<canvas id="中性脂肪Histogram" width="400" height="200"></canvas>
</div>
<div class="advice-container">
<img src="hituzi_advice.png" alt="Character" class="bubble-image">
<div class="advice-bubble">
<div id="advice_HL"></div>
</div>
</div>
<h3>糖尿病に関する項目</h3>
<div class="container-item">
<h4>HbA1c</h4>
<p>HbA1cは、過去数ヶ月間の血糖値の平均を示す指標です。糖尿病の診断や管理に利用されます。</p>
<canvas id="HbA1CHistogram" width="400" height="200"></canvas>
</div>
<div class="container-item">
<h4>空腹時血糖</h4>
<p>空腹時血糖は、食事をとっていない状態での血糖値を測定します。糖尿病の早期発見に役立ちます。</p>
<canvas id="空腹時血糖Histogram" width="400" height="200"></canvas>
</div>
<div class="advice-container">
<img src="hituzi_advice.png" alt="Character" class="bubble-image">
<div class="advice-bubble">
<div id="advice_DM"></div>
</div>
</div>
</div>
<script src="result.js"></script>
</body>
</html>