ユーザーが入力した値をグラフ表示する

▼ サンプルサイトは、こちら

f:id:khirok:20200502134611p:plain — 数値を入力すると

f:id:khirok:20200502134634p:plain — グラフ化される

実装方法

chart.jsを使用しました。

このサイトから、URLをコピーして、bodyを閉じるタグの直前で読み込ませます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
</body>

グラフを表示させたい箇所には、この記述をします。

<canvas id="myPieChart"></canvas>

また、chart.jsを読み込む記述とbodyを閉じるタグの間に、以下のように記述を追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myPieChart");
  // ボタンをクリックした時に
  $('.complete-btn').click(function(){

   // 入力値を取得して、変数に代入
    var tokyo = $('.tokyo').val();
    var osaka = $('.osaka').val();
    var nagoya = $('.nagoya').val();
    var sapporo = $('.sapporo').val();

    // グラフの設定
    var myPieChart = new Chart(ctx, {

      // ドーナツ型
      type: 'doughnut',
      data: {
        labels: ["東京", "大阪", "名古屋", "札幌"],
        datasets: [{
            backgroundColor: [
                "#e0e0e0",
                "#a0a0a0",
                "#606060",
                "#202020"
            ],

            // 入力値が入っている変数を利用
            data: [tokyo, osaka, nagoya, sapporo]
        }]
      },
      options: {
        title: {
          display: true,
          text: '都市の人口'
        }
      }
    });
  })
  </script>
</body>

これで、完成です。

参考資料：
Chart.js · Chart.js 日本語ドキュメント

サンプルサイトのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>chart</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <canvas id="myPieChart"></canvas>
  <div class="input-area">
    <div class="input-area__inner">
      <p>東京</p>
      <input class="chart tokyo" type="number">
      <span>万人</span>
      <p>大阪</p>
      <input class="chart osaka" type="number">
      <span>万人</span>
      <p>名古屋</p>
      <input class="chart nagoya" type="number">
      <span>万人</span>
      <p>札幌</p>
      <input class="chart sapporo" type="number">
      <span>万人</span>
      <button class="complete-btn">入力完了</button>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myPieChart");
  // ボタンをクリックした時
  $('.complete-btn').click(function(){

    // 入力値を取得して、変数に代入
    var tokyo = $('.tokyo').val();
    var osaka = $('.osaka').val();
    var nagoya = $('.nagoya').val();
    var sapporo = $('.sapporo').val();

    // グラフの設定
    var myPieChart = new Chart(ctx, {

      // ドーナツ型
      type: 'doughnut',
      data: {
        labels: ["東京", "大阪", "名古屋", "札幌"],
        datasets: [{
            backgroundColor: [
                "#e0e0e0",
                "#a0a0a0",
                "#606060",
                "#202020"
            ],

            // 入力した値が入った変数を利用
            data: [tokyo, osaka, nagoya, sapporo]
        }]
      },
      options: {
        title: {
          display: true,
          text: '都市の人口'
        }
      }
    });
  })
  </script>
</body>
</html>

CSS

.complete-btn {
  width: 90%;
  display: block;
  margin-top: 50px;
  border: 1px solid black;
  background-color: #fff;
  padding: 15px 0;
  font-size: 100%;
}
.input-area {
  width: 50%;
  display: flex;
  justify-content: center;
  padding-left: 10px;
}
p {
  margin: 15px 0;
}
.chart {
  border: 1px solid black;
  text-align: right;
  padding: 3px;
  font-size: 100%;
}
body {
  display: flex;
}
@media (max-width: 600px) {
  body {
    display: block;
  }
  .input-area {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 10px;
  }
}