HTMLで円グラフを作ることができない。

HTMLとJavaScriptを使って1～12月の降水量を入力して円グラフを表示させるプログラムを作成したいです。
ここに書いてあるプログラムはボタンを押したら1,2,3...12までの円グラフを作成する物です。
最終的には1～12月の降水量値を入力して円グラフにプロットしたいです。

現在問題点が2点あります。
・monthの入力ホームの値を複数取得しようとするとボタンを押しても何も表示されない。month1だけなら想定通りボタンを押したら円グラフが表示される。
・dateにparseFloat(month1,10)と入力しても値を受け取ったように動作しない。

以上2点の問題点を解決できる方いたら教えてください。お願いします。

<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <title>課題②</title>
</head>
 
<body>
    <form>
        <h1>降水量の円グラフ化</h1>
        <label for="month1">１月</label>
        <input type="text" id="month1">
        <br>
        <label for="month2">２月</label>
        <input type="text" id="month1">
        <br>
        <label for="month3">３月</label> 
        <input type="text" id="month3">
        <br>
        <label for="month4">４月</label>
        <input type="text" id="month4">
        <br>
        <label for="month5">５月</label>
        <input type="text" id="month5">
        <br>
        <label for="month6">６月</label>
        <input type="text" id="month6">
        <br>
        <label for="month7">７月</label>
        <input type="text" id="month7">
        <br>
        <label for="month8">８月</label>
        <input type="text" id="month8">
        <br>
        <label for="month9">９月</label>
        <input type="text" id="month9">
        <br>
        <label for="month10">１０月</label>
        <input type="text" id="month10">
        <br>
        <label for="month11">１１月</label>
        <input type="text" id="month11">
        <br>
        <label for="month12">１２月</label>
        <input type="text" id="month12">
        <br>    
        <button id="button">円グラフ化</button>
    </form>
    
    <canvas id="myPieChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    
    <script>
        
         // 入力フォームの値を取得
        var month1 = document.getElementById("month1").value;
        var month2 = document.getElementById("month2").value;
        var month3 = document.getElementById("month3").value;
        var month4 = document.getElementById("month4").value;
        var month5 = document.getElementById("month5").value;
        var month6 = document.getElementById("month6").value;
        var month7 = document.getElementById("month7").value;
        var month8 = document.getElementById("month8").value;
        var month9 = document.getElementById("month9").value;
        var month10 = document.getElementById("month10").value;
        var month11 = document.getElementById("month11").value;
        var month12 = document.getElementById("month12").value;
        
        
        // ボタンの要素を取得
        var button = document.getElementById("button");
       
        // ボタンをクリックした時の処理
        button.addEventListener("click", function(e) {
            e.preventDefault();
            
            
            var ctx = document.getElementById("myPieChart");
            var myPieChart = new Chart(ctx, {
            type: 'pie',
                data: {
                    labels: ["１月", "２月", "３月", "４月","５月","６月","７月","８月","９月","１０月","１１月","１２月"],
                    datasets: [{
                        backgroundColor: [],
                        data: [1,2,3,4,5,6,7,8,9,10,11,12]
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: '降水量'
                    }
                }
            });
            });
        
       
  </script>
    
    
</body>

</html>

行動規範の内容に同意します

回答3件

入力フォームの値を取得する処理はイベントリスナ内で行います。

（クリック発生前に1度だけ取得するコードになっています）
2. qiita Chart.jsでグラフを描画してみたの円グラフが参考になると思います。

投稿2020/08/02 21:38

AkitoshiManabe

総合スコア5432

zigu

2020/08/07 06:37

回答ありがとうございました。申し訳ないのですが自分で解決できました。

AkitoshiManabe

2020/08/07 06:56

> 自分で解決できました解決されて何よりです。具体的な解決手順を記載し、自己解決されると良いと思います。 https://teratail.com/help

zigu

2020/08/10 17:08

返信が遅れてしまい申し訳ありません。ご指摘の通り解決方法を記載いたします。とても初歩的なミスでした。

行動規範の内容に同意します

自己解決

<label for="month2">２月</label>
        <input type="text" id="month1">

上記記載の２月のラベルを定義する際にmonth1を定義していました。
こちらをmonth2に変更すると解決できました。
回答してくださった皆様ありがとうございます。

投稿2020/08/10 17:11

zigu

総合スコア14

解決済みだったけども、素のJavascriptで作成してみたので
投稿。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        body {
10            position: relative;
11            margin: 0;
12        }
13
14        .allWrap {
15            width: 690px;
16            height: 540px;
17            margin: 0 auto;
18            overflow: hidden;
19            position: relative;
20        }
21
22        .inputWrap {
23            width: 90px;
24            position: relative;
25            float: left;
26        }
27
28        label {
29            width: 45px;
30            height: 45px;
31            line-height: 45px;
32            font-size: 16px;
33            text-align: right;
34            display: inline-block;
35            vertical-align: middle;
36            position: relative;
37        }
38
39        label::after {
40            content: "%";
41            position: absolute;
42            left: 93px;
43        }
44
45        .input {
46            width: 35px;
47            height: 28px;
48            font-size: 16px;
49            font-weight: bold;
50            display: inline-block;
51            margin: 0 auto;
52            border: 1px solid black;
53            border-radius: 0;
54            outline: none;
55            background: none;
56            text-align: center;
57            -webkit-box-sizing: border-box;
58            box-sizing: border-box;
59        }
60
61        .graphWrap {
62            width: 600px;
63            position: relative;
64            margin: 0;
65            padding: 0;
66            float: left;
67        }
68
69        #zero,
70        #January,
71        #February,
72        #March,
73        #April,
74        #May,
75        #June,
76        #July,
77        #August,
78        #September,
79        #October,
80        #November,
81        #December {
82            fill: none;
83            stroke-width: 250;
84            display: none;
85        }
86
87        .circleWrap {
88            width: 500px;
89            height: 500px;
90            margin: 20px 50px;
91            position: absolute;
92        }
93
94        #zero {
95            stroke: rgba(0, 0, 0, 0.5);
96            stroke-dasharray: 785, 785;
97            display: block;
98        }
99
100        #January {
101            stroke: #92eb03;
102        }
103
104        #February {
105            stroke: #eb2603;
106        }
107
108        #March {
109            stroke: #03bdeb;
110        }
111
112        #April {
113            stroke: #dceb03;
114        }
115
116        #May {
117            stroke: #03eb7f;
118        }
119
120        #June {
121            stroke: #eb6b03;
122        }
123
124        #July {
125            stroke: #eb03e0;
126        }
127
128        #August {
129            stroke: #a903eb;
130        }
131
132        #September {
133            stroke: #0b0c0a;
134        }
135
136        #October {
137            stroke: #03e3eb;
138        }
139
140        #November {
141            stroke: #0341eb;
142        }
143
144        #December {
145            stroke: #f8f8f8;
146        }
147
148        #button {
149            position: absolute;
150            bottom: 0;
151            right: 0;
152            font-size: 20px;
153        }
154
155        .resetBtn {
156            position: absolute;
157            bottom: 0;
158            left: 120px;
159            font-size: 20px;
160            width: 100px;
161            z-index: 1;
162        }
163    </style>
164</head>
165
166<body>
167    <div class="allWrap">
168        <div class="inputWrap">
169            <label for="input01">1月</label>
170            <input type="tel" maxlength="3" name="input" id="input01" class="input">
171            <label for="input02">2月</label>
172            <input type="tel" maxlength="3" name="input" id="input02" class="input">
173            <label for="input03">3月</label>
174            <input type="tel" maxlength="3" name="input" id="input03" class="input">
175            <label for="input04">4月</label>
176            <input type="tel" maxlength="3" name="input" id="input04" class="input">
177            <label for="input05">5月</label>
178            <input type="tel" maxlength="3" name="input" id="input05" class="input">
179            <label for="input06">6月</label>
180            <input type="tel" maxlength="3" name="input" id="input06" class="input">
181            <label for="input07">7月</label>
182            <input type="tel" maxlength="3" name="input" id="input07" class="input">
183            <label for="input08">8月</label>
184            <input type="tel" maxlength="3" name="input" id="input08" class="input">
185            <label for="input09">9月</label>
186            <input type="tel" maxlength="3" name="input" id="input09" class="input">
187            <label for="input10">10月</label>
188            <input type="tel" maxlength="3" name="input" id="input10" class="input">
189            <label for="input11">11月</label>
190            <input type="tel" maxlength="3" name="input" id="input11" class="input">
191            <label for="input12">12月</label>
192            <input type="tel" maxlength="3" name="input" id="input12" class="input">
193            <button class="resetBtn" type="button">
194                リセット
195            </button>
196        </div>
197        <figure class="graphWrap">
198            <svg class="circleWrap">
199                <circle r="125" cx="250" cy="250" id="January" /></svg>
200            <svg class="circleWrap">
201                <circle r="125" cx="250" cy="250" id="February" /></svg>
202            <svg class="circleWrap">
203                <circle r="125" cx="250" cy="250" id="March" /></svg>
204            <svg class="circleWrap">
205                <circle r="125" cx="250" cy="250" id="April" /></svg>
206            <svg class="circleWrap">
207                <circle r="125" cx="250" cy="250" id="May" /></svg>
208            <svg class="circleWrap">
209                <circle r="125" cx="250" cy="250" id="June" /></svg>
210            <svg class="circleWrap">
211                <circle r="125" cx="250" cy="250" id="July" /></svg>
212            <svg class="circleWrap">
213                <circle r="125" cx="250" cy="250" id="August" /></svg>
214            <svg class="circleWrap">
215                <circle r="125" cx="250" cy="250" id="September" /></svg>
216            <svg class="circleWrap">
217                <circle r="125" cx="250" cy="250" id="October" /></svg>
218            <svg class="circleWrap">
219                <circle r="125" cx="250" cy="250" id="November" /></svg>
220            <svg class="circleWrap">
221                <circle r="125" cx="250" cy="250" id="December" /></svg>
222            <svg class="circleWrap">
223                <circle r="125" cx="250" cy="250" id="zero" /></svg>
224        </figure>
225        <button id="button" type="button">
226            グラフ作成
227        </button>
228    </div>
229    <script>
230
231        const allWrap = document.querySelector(".allWrap");
232        const allWrapHeight = allWrap.clientHeight;
233
234
235        const allWrapAdjust = () => {
236            const windowHeight = window.innerHeight;
237            const allWrapPaddingTop = (windowHeight - allWrapHeight) / 2;
238            document.getElementsByTagName("figure")[0].style.height = allWrap.clientHeight + "px";
239            allWrap.style.paddingTop = allWrapPaddingTop + "px";
240        }
241
242        window.onload = allWrapAdjust();
243        window.addEventListener("resize", () => {
244            allWrapAdjust();
245        });
246
247        //ここからバリデート
248
249        const validate = (val) => {
250            event.currentTarget.value = val.replace(/[^0-9]/g, "");
251        }
252
253        const input = document.querySelectorAll(".input");
254
255        const inputEvent = () => {
256            for (let i = 0; i < 12; i++) {
257                input[i].addEventListener("input", () => {
258                    const value = input[i].value;
259                    validate(value);
260                })
261            }
262        }
263
264        inputEvent();
265
266        // ここからグラフ作成
267
268        const createGraph = () => {
269            const percentageArr = [];
270            for (let i = 0; i < 12; i++) {
271                percentageArr.push(Number(input[i].value));
272            }
273            if (totalPercentage(percentageArr) === 100) {
274                createSector(percentageArr);
275            }
276        };
277
278        const totalPercentage = (arr) => {
279            let total = 0;
280            for (let i = 0; i < 12; i++) {
281                total += arr[i];
282            }
283            return total;
284        }
285
286        const createBtn = document.getElementById("button");
287
288        const createSector = (percentageArr) => {
289            const zero = document.getElementById("zero");
290            zero.style.display = "none";
291            const circle = document.getElementsByTagName("circle")
292            let angle = 270;
293            for (let i = 0; i < 12; i++) {
294                if (percentageArr[i] > 0) {
295                    circle[i].style.display = "block";
296                    circle[i].style.strokeDasharray = 785 * (percentageArr[i] / 100) + ",785";
297                    circle[i].parentElement.style.transform = "rotate(" + angle + "deg)";
298                    angle = angle + (360 * (percentageArr[i] / 100));
299                }
300            }
301        }
302
303        createBtn.addEventListener("click", () => {
304            createGraph();
305        });
306
307        const resetBtn = document.getElementsByClassName("resetBtn")[0];
308
309        resetBtn.addEventListener("click", () => {
310            for (let i = 0; i < 12; i++) {
311                console.log(input[i].value);
312                input[i].value = input[i].value.replace(/[0-9]/g, "");
313            }
314        });
315
316    </script>
317</body>
318
319</html>