目次
概要
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>