今回はサイトで円グラフを表示させるために、Chart.jsを使用することにしました。
検索していると比較的簡単そうに実装できそうだったため舐めていましたが、落とし穴が！
特に、入力した数値を入れて「enter」でグラフを表示させるような動きを書きたい人で、困っている方は必見です！
わかりにくくてすみません・・・
私が今回作成したものは、
「初期画面で数値入力→その結果でグラフ表示」
といった動きのもので、あらかじめグラフを表示させたい部分は非表示させているような感じでした。
困っている方のお役に立てたらと思います！
では今回私が躓いたことについて共有させていただきます。
基本的な書き方
今回は上の図のように簡単な円グラフを書きます。
HTML
HTMLは、Chart.jsの読み込みと、下記のコードを入れるだけです。
<canvas id="myPieChart"></canvas>読み込み方は、ダウンロードやnpmを使用する方法などありますが、今回は、CDNを使いました。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>公式のCDNの読み込みがうまくいかなかったので、上記コード jsDelivr を使いました。
js
const myPieChart = new Chart(ctx, {
type: "pie", // 円グラフを使用
data: {
labels: ["夢", "覚醒"],
datasets: [
{
backgroundColor: ["#BB5179", "#FAFF67"],
data: [50, 50],
},
],
},
options: {
plugins: {
datalabels: {
color: "#000",
font: {
weight: "bold",
},
},
},
},
});一旦はこんな感じで書きます。
私の場合は、これで何度チャレンジしてもうまくいきませんでした。
原因は、初期状態で非表示になっていたから
結構単純なことでしたが盲点でした。
私が作成したいものは前述の通り、「初期状態で非表示」しているものだったのです。
グラフを表示させたい部分を、CSSで display: none; と設定しており、エラーが起きていたようでした。
改善コード
初期状態で非表示にさせたい場合の書き方は下記のとおりです。
document.addEventListener("DOMContentLoaded", function() {
const ctx = document.getElementById("myChart");
const resultSection = document.querySelector(".result-section");
let myChart = null;
function showChart() {
// 1. 親要素を表示
resultSection.style.display = "block";
// 2. 既存のグラフを破棄
if (myChart) {
myChart.destroy();
}
// 3. レンダリング後にグラフを作成
setTimeout(() => {
myChart = new Chart(ctx, {
type: "pie",
data: {
labels: ["項目1", "項目2"],
datasets: [{
data: [50, 50],
backgroundColor: ["#FF6384", "#36A2EB"]
}]
},
options: {
responsive: true,
maintainAspectRatio: true
}
});
}, 100);
}
});<canvas style=”width: 400px; height: 200px;”></canvas>
上記のようなインラインスタイルは、親要素がdisplay: none;の場合、エラーの原因になる可能性があるので、CSSで調整する方が良さそうです。
おわりに
役立つ人は限られていそうですが、是非ご参照いただけたら幸いです！
Chart.jsを使用して作成した、私の簡単なウェブアプリは下記になるので、暇な方は見てみてください！
