質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.90%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 317

score 2

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">1月</label>
        <input type="text" id="month1">
        <br>
        <label for="month2">2月</label>
        <input type="text" id="month1">
        <br>
        <label for="month3">3月</label> 
        <input type="text" id="month3">
        <br>
        <label for="month4">4月</label>
        <input type="text" id="month4">
        <br>
        <label for="month5">5月</label>
        <input type="text" id="month5">
        <br>
        <label for="month6">6月</label>
        <input type="text" id="month6">
        <br>
        <label for="month7">7月</label>
        <input type="text" id="month7">
        <br>
        <label for="month8">8月</label>
        <input type="text" id="month8">
        <br>
        <label for="month9">9月</label>
        <input type="text" id="month9">
        <br>
        <label for="month10">10月</label>
        <input type="text" id="month10">
        <br>
        <label for="month11">11月</label>
        <input type="text" id="month11">
        <br>
        <label for="month12">12月</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: ["1月", "2月", "3月", "4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                    datasets: [{
                        backgroundColor: [],
                        data: [1,2,3,4,5,6,7,8,9,10,11,12]
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: '降水量'
                    }
                }
            });
            });


  </script>


</body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

  1. 入力フォームの値を取得する処理はイベントリスナ内で行います。
    (クリック発生前に1度だけ取得するコードになっています)
  2. qiita Chart.jsでグラフを描画してみた の円グラフが参考になると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/07 15:37

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

    キャンセル

  • 2020/08/07 15:56

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

    キャンセル

  • 2020/08/11 02:08

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

    キャンセル

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
            margin: 0;
        }

        .allWrap {
            width: 690px;
            height: 540px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .inputWrap {
            width: 90px;
            position: relative;
            float: left;
        }

        label {
            width: 45px;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            text-align: right;
            display: inline-block;
            vertical-align: middle;
            position: relative;
        }

        label::after {
            content: "%";
            position: absolute;
            left: 93px;
        }

        .input {
            width: 35px;
            height: 28px;
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 0;
            outline: none;
            background: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .graphWrap {
            width: 600px;
            position: relative;
            margin: 0;
            padding: 0;
            float: left;
        }

        #zero,
        #January,
        #February,
        #March,
        #April,
        #May,
        #June,
        #July,
        #August,
        #September,
        #October,
        #November,
        #December {
            fill: none;
            stroke-width: 250;
            display: none;
        }

        .circleWrap {
            width: 500px;
            height: 500px;
            margin: 20px 50px;
            position: absolute;
        }

        #zero {
            stroke: rgba(0, 0, 0, 0.5);
            stroke-dasharray: 785, 785;
            display: block;
        }

        #January {
            stroke: #92eb03;
        }

        #February {
            stroke: #eb2603;
        }

        #March {
            stroke: #03bdeb;
        }

        #April {
            stroke: #dceb03;
        }

        #May {
            stroke: #03eb7f;
        }

        #June {
            stroke: #eb6b03;
        }

        #July {
            stroke: #eb03e0;
        }

        #August {
            stroke: #a903eb;
        }

        #September {
            stroke: #0b0c0a;
        }

        #October {
            stroke: #03e3eb;
        }

        #November {
            stroke: #0341eb;
        }

        #December {
            stroke: #f8f8f8;
        }

        #button {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 20px;
        }

        .resetBtn {
            position: absolute;
            bottom: 0;
            left: 120px;
            font-size: 20px;
            width: 100px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="allWrap">
        <div class="inputWrap">
            <label for="input01">1月</label>
            <input type="tel" maxlength="3" name="input" id="input01" class="input">
            <label for="input02">2月</label>
            <input type="tel" maxlength="3" name="input" id="input02" class="input">
            <label for="input03">3月</label>
            <input type="tel" maxlength="3" name="input" id="input03" class="input">
            <label for="input04">4月</label>
            <input type="tel" maxlength="3" name="input" id="input04" class="input">
            <label for="input05">5月</label>
            <input type="tel" maxlength="3" name="input" id="input05" class="input">
            <label for="input06">6月</label>
            <input type="tel" maxlength="3" name="input" id="input06" class="input">
            <label for="input07">7月</label>
            <input type="tel" maxlength="3" name="input" id="input07" class="input">
            <label for="input08">8月</label>
            <input type="tel" maxlength="3" name="input" id="input08" class="input">
            <label for="input09">9月</label>
            <input type="tel" maxlength="3" name="input" id="input09" class="input">
            <label for="input10">10月</label>
            <input type="tel" maxlength="3" name="input" id="input10" class="input">
            <label for="input11">11月</label>
            <input type="tel" maxlength="3" name="input" id="input11" class="input">
            <label for="input12">12月</label>
            <input type="tel" maxlength="3" name="input" id="input12" class="input">
            <button class="resetBtn" type="button">
                リセット
            </button>
        </div>
        <figure class="graphWrap">
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="January" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="February" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="March" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="April" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="May" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="June" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="July" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="August" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="September" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="October" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="November" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="December" /></svg>
            <svg class="circleWrap">
                <circle r="125" cx="250" cy="250" id="zero" /></svg>
        </figure>
        <button id="button" type="button">
            グラフ作成
        </button>
    </div>
    <script>

        const allWrap = document.querySelector(".allWrap");
        const allWrapHeight = allWrap.clientHeight;


        const allWrapAdjust = () => {
            const windowHeight = window.innerHeight;
            const allWrapPaddingTop = (windowHeight - allWrapHeight) / 2;
            document.getElementsByTagName("figure")[0].style.height = allWrap.clientHeight + "px";
            allWrap.style.paddingTop = allWrapPaddingTop + "px";
        }

        window.onload = allWrapAdjust();
        window.addEventListener("resize", () => {
            allWrapAdjust();
        });

        //ここからバリデート

        const validate = (val) => {
            event.currentTarget.value = val.replace(/[^0-9]/g, "");
        }

        const input = document.querySelectorAll(".input");

        const inputEvent = () => {
            for (let i = 0; i < 12; i++) {
                input[i].addEventListener("input", () => {
                    const value = input[i].value;
                    validate(value);
                })
            }
        }

        inputEvent();

        // ここからグラフ作成

        const createGraph = () => {
            const percentageArr = [];
            for (let i = 0; i < 12; i++) {
                percentageArr.push(Number(input[i].value));
            }
            if (totalPercentage(percentageArr) === 100) {
                createSector(percentageArr);
            }
        };

        const totalPercentage = (arr) => {
            let total = 0;
            for (let i = 0; i < 12; i++) {
                total += arr[i];
            }
            return total;
        }

        const createBtn = document.getElementById("button");

        const createSector = (percentageArr) => {
            const zero = document.getElementById("zero");
            zero.style.display = "none";
            const circle = document.getElementsByTagName("circle")
            let angle = 270;
            for (let i = 0; i < 12; i++) {
                if (percentageArr[i] > 0) {
                    circle[i].style.display = "block";
                    circle[i].style.strokeDasharray = 785 * (percentageArr[i] / 100) + ",785";
                    circle[i].parentElement.style.transform = "rotate(" + angle + "deg)";
                    angle = angle + (360 * (percentageArr[i] / 100));
                }
            }
        }

        createBtn.addEventListener("click", () => {
            createGraph();
        });

        const resetBtn = document.getElementsByClassName("resetBtn")[0];

        resetBtn.addEventListener("click", () => {
            for (let i = 0; i < 12; i++) {
                console.log(input[i].value);
                input[i].value = input[i].value.replace(/[0-9]/g, "");
            }
        });

    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/11 02:08

    ありがとうございます。
    明日じっくりと拝見させていただきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る