Chart.js3.7でドーナツチャートの中心にテキスト表示する方法
Chart.js 3.7.0でドーナツチャートの中心にテキストを表示した。
※2系だとまた違う方法で実装することになる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
font-size: 12px;
}
.container {
padding: 16px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<canvas id="doughnut_chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.min.js"></script>
<script type="module" src="./graph.js"></script>
</body>
</html>
graph.js
const doughnutChart = document.getElementById('doughnut_chart');
// 真ん中に表示するオブジェクト
const counter = {
id: 'counter',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { top, right , bottom, left, width, height } } = chart;
ctx.save();
ctx.fillStyle = 'black';
ctx.fillRect(width / 2, top + (height / 2), 0, 0);
ctx.font = '32px sans-serif';
ctx.textAlign = 'center';
// 位置調整
console.log("width", width);
console.log("height", height);
console.log("top", top);
console.log("width / 2, top + (height / 2)", width / 2, top + (height / 2));
ctx.fillText('75%', width / 2, top + (height / 2));
}
};
const centerDoughnutChart = new Chart(doughnutChart, {
type: 'doughnut',
data: {
labels: ['項目1', '項目2', '項目3', '項目4'],
datasets: [{
label: 'votes',
data: [10, 20, 30, 40],
backgroundColor: [
'rgba(255, 112, 166, 0.5)',
'rgba(255, 151, 112, 0.5)',
'rgba(255, 214, 112, 0.5)',
'rgba(112, 214, 255, 0.5)',
],
borderColor: [
'rgba(255, 112, 166, 1)',
'rgba(255, 151, 112, 1)',
'rgba(255, 214, 112, 1)',
'rgba(112, 214, 255, 1)',
],
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false,
position: 'left',
},
title: {
display: true,
text: '円グラフ',
position: 'top',
align: 'center',
},
counter: {
fontColor: 'red',
fontSize: '50px',
fontFamily: 'sans-serif',
},
},
},
plugins: [counter]
});
ようはドーナツチャートの真ん中にテキストを表示するプラグインを作成している。
元ネタ
How to Add Text and Value at the Center of a Doughnut Chart in Chart JS?
by Chart JS
https://www.youtube.com/watch?v=E8pSF9JrEvE