[chart.js v4]グラフ設置の基本形メモ

基本形。テクニックについての言及なし。

タグ設置
js記述例
参考
jQueryを使う場合

タグ設置

<div class="graph">
    <canvas id="chart"></canvas>
</div>

<canvas>を使う。個別に指定できるようにidを振る。

構成時に何かしらが発生する場合が多いので、親要素で包んでおくのを癖付けておいた方がいい。

js記述例

今回はv4。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
    let config = {
        type: "bar",
        data: {
            labels: ['A','B','C','D','E','F'],
            datasets: [{
                label: 'data label',
                data: [10,20,30,40,50,60],
            }],
        },
        plugins: [
            ChartDataLabels,
        ],
        options: {
            responsive: true,
            scales: {
            y: {
                min: 0,
                max: 100,
                }
            },
            plugins: {
                datalabels: {
                    align: "end",
                    anchor: "end",
                    font: {
                        size: 16,
                    },
                },
                legend: {
                    display: false,
                },
            },
            layout: {
                padding: {
                    left: 50,
                    right: 50,
                }
            },
        },
    };
    window.addEventListener('load', function() {
        let ctx = document.getElementById("chart").getContext("2d");
        myChart = new Chart(ctx, config);
    }, false);
</script>

canvasより下に記述する。

構成は多次元配列で記述するので結構大変。

プラグインを入れることでchart.jsの機能を拡張できる。
上記では「ChartDataLabels」を使用。まずjsファイルを読んで、config内で呼び出して、設定。

参考

英語がわかるなら公式を見るのが間違いない。

Chart.js | Chart.js

Open source HTML5 Charts for your website

v2の範疇であれば有志が翻訳したドキュメントがある。

Chart.js · Chart.js 日本語ドキュメント

Chart.jsドキュメント翻訳 | Chart.js - にほんご。

照合してないから情報の鮮度がどんなものかは不明、だけどv2であれば問題ないのではと思う。

jQueryを使う場合

jQueryで発火ならhead内に記述できるので管理が多少楽になる。

こちらを参照。

Chart.js で棒グラフを作る - Qiita

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>Chart.js 棒グラフ</title><scrip…

設定方法自体は同じで、無明関数外の変数は単純に設定内容の一部を外で書いてるだけだから、別段警戒することはない。プラグインとかオプションとかを追加したい場合は、こちらもconfigに追記する形。

$(function(){
    const config = {
		type: 'bar',
		data: barChartData,
		responsive : true,
        plugins: [
            ChartDataLabels,
        ],
        options: {
            responsive: true,
            scales: {
            y: {
                min: 0,
                max: 100,
                }
            },
            plugins: {
                datalabels: {
                    align: "end",
                    anchor: "end",
                    font: {
                        size: 16,
                    },
                },
            },
            layout: {
                padding: {
                    left: 50,
                    right: 50,
                }
            },
        },
	}
	const context = $("#chart")
	const chart = new Chart(context,config)
})
const barChartData = {
	labels : ["青森","岩手","秋田","宮城","山形","福島"],
	datasets : [
		{
		label: "1年目",
		backgroundColor: "rgba(179,181,198,0.5)",
		data : [25,45,5,20,19,33]
		},
		{
		label: "2年目",
		backgroundColor: "rgba(255,99,132,0.5)",
		data : [10,54,77,32,9,78]
		}
	]
};

例に倣ってconfigの内訳を変数に格納するのも当然あり。