如何在Chart.js图表中添加自定义文字?

Chart.js 是一个流行的 JavaScript 图表库，用于创建各种类型的图表，在图表中添加文字可以帮助用户更好地理解数据，以下是如何在 Chart.js 中添加文字的详细步骤。

1. 引入 Chart.js 库

确保在 HTML 文件中引入 Chart.js 库，可以通过以下方式之一引入：

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

或者使用 npm 安装

npm install chart.js

然后在你的 JavaScript 文件中引入：

import { Chart } from 'chart.js';

2. 创建 HTML 元素

在 HTML 文件中创建一个<canvas> 元素，用于绘制图表：

<canvas id="myChart"></canvas>

3. 初始化图表

在 JavaScript 文件中，使用 Chart.js 初始化图表：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 图表类型，'line', 'bar', 'pie' 等
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

4. 在图表中添加文字

要在图表中添加文字，可以使用plugins 选项，以下示例展示了如何添加一个简单的文本插件：

options: {
    plugins: {
        tooltip: {
            enabled: false // 禁用默认的工具提示
        },
        customText: {
            id: 'customText', // 插件 ID，必须是唯一的
            beforeDraw: function (chart) {
                var width = chart.width;
                var height = chart.height;
                var fontSize = (height / 114).toFixed(2) + "em"; // 根据图表高度计算字体大小
                var fontStyle = "normal";
                var fontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
                var fontColor = "#666";
                var label = "My Custom Text";
                var xPos = Math.round((width label.length * fontSize) / 2);
                var yPos = height / 2;
                var textX = chart.chart.scales['y'].left;
                var textY = chart.chart.scales['y'].top + fontSize;
                chart.ctx.fillStyle = fontColor;
                chart.ctx.font = fontSize + " " + fontStyle + " " + fontFamily;
                chart.ctx.textBaseline = "middle";
                chart.ctx.textAlign = "center";
                chart.ctx.fillText(label, textX, textY);
            }
        }
    }
}

将上述代码添加到options 对象中，即可在图表中添加自定义文字。