「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表示する際のアニメーションの可否
