目次

概要

chart.jsを使ってポケモン種族値のレーダーチャートを作ってみました。
折角なので、jQueryのプラグインであるSelect2を使用して名称からポケモンを検索できるようにしてみました。
尚、種族値は以下サイトから頂きました。


完成したもの


実際のコード

<!DOCTYPE html>
      <html lang="ja">
        <head>
          <meta charset="utf-8" />
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      
          <script
            src="https://code.jquery.com/jquery-3.6.0.slim.js"
            integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
            crossorigin="anonymous"
          ></script>
          <link
            href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
            rel="stylesheet"
          />
          <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        </head>
        <body>
          <div style="max-width: 400px; margin-bottom: 20px">
            <canvas id="pokemonChart"></canvas>
          </div>
          <select id="select"></select>
          <script>
            window.myChart = null;
      
            let allData =
              "フシギダネ,45,49,49,65,65,45 フシギソウ,60,62,63,80,80,60 フシギバナ,80,82,83,100,100,80 //省略 ";
            let dArray = function (str) {
              return str.split(" ").map(function (item) {
                return item.split(",");
              });
            };
            let dataArray = dArray(allData);
      
            let selectBox = document.getElementById("select");
            for (let i = 0; i < dataArray.length; i++) {
              const option = document.createElement("option");
              option.textContent = dataArray[i][0];
              option.value = i;
              selectBox.appendChild(option);
            }
            function pokemonChart(index) {
              const pokemonChart = document
                .getElementById("pokemonChart")
                .getContext("2d");
      
              if (myChart) {
                myChart.destroy();
              }
      
              window.myChart = new Chart(pokemonChart, {
                type: "radar",
                data: {
                  labels: [
                    "HP",
                    "こうげき",
                    "ぼうぎょ",
                    "とくこう",
                    "とくぼう",
                    "すばやさ",
                  ],
                  datasets: [
                    {
                      label: dataArray[index][0],
                      data: [
                        dataArray[index][1],
                        dataArray[index][2],
                        dataArray[index][3],
                        dataArray[index][4],
                        dataArray[index][5],
                        dataArray[index][6],
                      ],
                      fill: true,
                      backgroundColor: "rgba(255, 99, 132, 0.2)",
                      borderColor: "rgb(255, 99, 132)",
                      pointBackgroundColor: "rgb(255, 99, 132)",
                      pointBorderColor: "#fff",
                      pointHoverBackgroundColor: "#fff",
                      pointHoverBorderColor: "rgb(255, 99, 132)",
                      pointHoverBorderWidth: 10,
                    },
                  ],
                },
                options: {
                  scales: {
                    r: {
                      suggestedMin: 0,
                      suggestedMax: 120,
                    },
                  },
                },
              });
            }
      
            pokemonChart(0);
          </script>
      
          <script>
            $("#select")
              .select2({
                width: "300px",
                placeholder: "ポケモンを選択してください",
                allowClear: true,
              })
              .on("change", function () {
                let val = $("#select").val();
                pokemonChart(val);
              });
          </script>
        </body>
      </html>