「chart.js」を使用して円グラフや棒グラフを自動生成する

円グラフや棒グラフを実装する際に値を読み込むことで自動生成可能な「chart.js」
Gemini等の生成AIを使用してスライドを作成する際にも使用されていますので、使い方を覚えてくと編集がしやすくなるのでメモ

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
$(function() {
	initPieCharts();
	initBbrCharts();
});
</script>

<!-- 円グラフ -->
<div class="chart-wrap">
<canvas class="pie-chart" data-values="57, 43" data-labels="男性, 女性"></canvas>
</div>

<!-- 棒グラフ -->
<div class="chart-wrap">
<canvas class="bar-chart" data-values="120, 200, 280, 350, 400, 530" data-labels="2020, 2021, 2022, 2023, 2024, 2025">
</div>

サンプルは外部読み込みファイルで独自関数を作成し、HTML上の値を参照できる仕組みにしています

jQuery

//円グラフ
function initPieCharts(selector = '.pie-chart') {
	$(selector).each(function() {
		createPieChart(this);
	});
}

function createPieChart(el) {
	
	const values = $(el).data('values').split(',').map(Number);
	const labels = $(el).data('labels').split(',');

	//文字サイズを取得
	const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
	
	//グラフの色設定
	const baseColors = ['#458ca8', '#e08081', '#a9c25c', '#ddc354', '#efa14c', '#ae5cc2'];
	const colors = values.map((_, i) => baseColors[i % baseColors.length]);
	
	return new Chart(el, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: values,
				backgroundColor: colors
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: true,
			animation: false,
			
			plugins: {
				legend: {
					display: false
				},
				tooltip: {
					enabled: false
				},
				datalabels: {
					clamp: true,
					labels: {
						title: {
							formatter: (value, context) => {
								return context.chart.data.labels[context.dataIndex];
							},
							color: '#fff',
							font: { size: 1 * rootFontSize },
							anchor: 'center',
							align: 'top',
							offset: 10,
							padding: 5
						},
						value: {
							formatter: (value, context) => {
								const data = context.chart.data.datasets[0].data;
								const total = data.reduce((a, b) => a + b, 0);
								const percent = Math.round((value / total) * 100);
								return percent + '%';
							},
							color: '#fff',
							font: { size: 1.4 * rootFontSize, weight: 'bold' },
							anchor: 'center',
							align: 'bottom'
						}
					}
				}
			}
		},
		plugins: [ChartDataLabels]
	});
}

//棒グラフ
function initBbrCharts(selector = '.bar-chart') {
	$(selector).each(function() {
		createBarChart(this);
	});
}
function createBarChart(el) {
	
	const values = $(el).data('values').split(',').map(Number);
	const labels = $(el).data('labels').split(',');
	
	//文字サイズを取得
	const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
	
	//棒グラフの色を設定
	const colors = values.map((_, i) => {
		return (i === values.length - 1) ? '#458ca8' : '#ccc';
	});
	
	return new Chart(el, {
		type: 'bar',
		data: {
			labels: labels,
			datasets: [{
				data: values,
				backgroundColor: colors
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			animation: false,
			scales: {
				x: {
					grid: {
						display: true, // グリッド線
						drawBorder: false // 軸の線
					},
					ticks: {
						display: true // 目盛りラベル
					}
				},
				y: {
					grid: {
						display: false,
						drawBorder: false
					},
					ticks: {
						display: false
					}
				}
			},
			plugins: {
				legend: {
					display: false
				},
				tooltip: {
					enabled: false
				},
				datalabels: {
					clamp: true,
					labels: {
						value: {
							formatter: (value) => value,
							color: '#fff',
							font: { size: 1.4 * rootFontSize, weight: 'bold' },
							anchor: 'center',
						}
					}
				}
			}
		},
		plugins: [ChartDataLabels]
	});
}

オプション（options）	効果
responsive	レスポンシブ対応の可否
maintainAspectRatio	比率の固定の可否
animation	表示する際のアニメーションの可否