本教程旨在指导如何在 chart.js 2.x 折线图中，为特定的y轴数值范围添加自定义背景色和文本标注。文章将介绍两种实现方法：利用 `chartjs-plugin-annotation` 插件进行快速配置，以及通过编写自定义 chart.js 插件，在 `beforedraw` 钩子中直接使用 canvas api 进行精确绘制，以满足更灵活或无插件限制的需求。
在数据可视化中，有时我们需要突出图表中特定数值范围的重要性，例如用不同颜色标记“显著”或“严重”区域，并配以相应的文本说明。对于 Chart.js 2.x 版本的折线图，实现这一需求有多种途径。
方法一：使用 chartjs-plugin-annotation 插件
chartjs-plugin-annotation 是 Chart.js 的一个强大插件，它允许用户在图表上添加各种类型的注释，包括线、盒、文本等。对于 Chart.js 2.x 版本，推荐使用 chartjs-plugin-annotation 的 0.5.7 版本，以确保兼容性。
插件安装与配置
首先，通过 CDN 或 npm 引入插件：
然后，在 Chart.js 的 options 配置中，通过 annotation 属性来定义盒形和文本注释。您可以为每个需要着色的区域定义一个 box 类型注释来设置背景色，再定义一个 text 类型注释来添加文本标签。
options: {
// ... 其他 Chart.js 选项
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 60,
yMax: 80,
backgroundColor: 'rgba(200, 200, 200, 0.5)', // 浅灰色
borderColor: 'transparent'
}, {
type: 'label', // 或者 text
yScaleID: 'y-axis-0',
yValue: 70, // 文本居中位置
xValue: 100, // 文本X轴位置，可能需要调整
content: 'Significant',
fontColor: '#000',
fontSize: 14,
position: 'right', // 文本位置
xAdjust: -10 // 微调
},
// 为 80-100 范围添加类似配置
{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 80,
yMax: 100,
backgroundColor: 'rgba(100, 100, 100, 0.5)', // 深灰色
borderColor: 'transparent'
}, {
type: 'label',
yScaleID: 'y-axis-0',
yValue: 90,
xValue: 100,
content: 'Severe',
fontColor: '#fff',
fontSize: 14,
position: 'right',
xAdjust: -10
}]
}
}这种方法配置简单，但对于非常精细的自定义绘制（例如特定样式的虚线或更复杂的文本布局），可能存在一定的局限性。
方法二：自定义 Chart.js 插件实现
当插件使用受限，或者需要更高度的自定义控制时，可以编写一个 Chart.js 自定义插件。通过利用 Chart.js 提供的插件核心 API，特别是 beforeDraw 钩子，我们可以在图表绘制之前直接在 Canvas 上进行绘制。
1. 插件原理概述
Chart.js 插件提供了一系列生命周期钩子函数，允许开发者在图表的不同绘制阶段介入。beforeDraw 钩子会在图表的数据集、轴线等元素绘制之前执行。这意味着我们可以在此阶段绘制背景区域和文本，而不会被后续的图表元素覆盖。
在 beforeDraw(chart) 钩子中，chart 参数提供了对整个图表实例的访问，包括其绘图上下文 (chart.ctx) 和所有轴 (chart.scales)。
2. 获取绘图上下文与轴信息
首先，在自定义插件的 beforeDraw 方法中，获取 Canvas 的 2D 绘图上下文 (ctx) 以及 X 轴和 Y 轴的引用：
plugins: [{
beforeDraw(chart) {
const ctx = chart.ctx;
const xAxis = chart.scales['x-axis-0']; // 获取X轴实例，通常ID为'x-axis-0'
const yAxis = chart.scales['y-axis-0']; // 获取Y轴实例，通常ID为'y-axis-0'
// 获取X轴的左右边界像素坐标
const xMin = xAxis.left;
const xMax = xAxis.right;
// 将Y轴的数值（如60, 80, 100）转换为对应的像素坐标
const y100 = yAxis.getPixelForValue(100);
const y80 = yAxis.getPixelForValue(80);
const y60 = yAxis.getPixelForValue(60);
// ... 后续绘制逻辑
}
}]yAxis.getPixelForValue(value) 方法是关键，它能将Y轴上的数据值转换为 Canvas 上的垂直像素坐标。
3. 绘制背景区域与文本标注
有了轴的像素坐标后，我们就可以使用 Canvas API 来绘制矩形背景和文本。
plugins: [{
beforeDraw(chart) {
const ctx = chart.ctx,
xAxis = chart.scales['x-axis-0'],
xMin = xAxis.left,
xMax = xAxis.right,
yAxis = chart.scales['y-axis-0'],
y100 = yAxis.getPixelForValue(100),
y80 = yAxis.getPixelForValue(80),
y60 = yAxis.getPixelForValue(60);
// 定义需要着色的区域及其对应的颜色和文本
const bands = [
[y60, y80, 'rgba(200, 200, 200, 0.8)', 'Significant'], // 60-80: 浅灰色
[y80, y100, 'rgba(100, 100, 100, 0.8)', 'Severe'] // 80-100: 深灰色
];
for (const [yStart, yEnd, color, text] of bands) {
// 绘制背景矩形
ctx.fillStyle = color;
// fillRect(x, y, width, height)
// x: X轴左边界, y: 区域顶部像素, width: X轴宽度, height: 区域高度
ctx.fillRect(xMin, yStart, xMax - xMin, yEnd - yStart);
// 添加文本标注
ctx.fillStyle = '#fff'; // 文本颜色
ctx.strokeStyle = 'rgba(0,0,0,0.3)'; // 文本描边颜色
ctx.textAlign = 'right'; // 文本右对齐
// 根据区域高度动态调整字体大小，并限制最大值
ctx.font = Math.round(Math.min((yEnd - yStart) / 3, 48)) + 'px serif';
ctx.textBaseline = 'middle'; // 文本垂直居中
// 绘制文本 (fillText) 和描边文本 (strokeText)
// text: 文本内容, x: X轴右边界-10px, y: 区域垂直中心
ctx.fillText(text, xMax - 10, (yEnd + yStart) / 2);
ctx.strokeText(text, xMax - 10, (yEnd + yStart) / 2);
}
}
}]4. 完整的 Chart.js 配置示例
将上述自定义插件集成到 Chart.js 的配置中，即可实现预期效果。
Chart.js 特定区域背景着色
注意事项
- Chart.js 版本兼容性: 本教程的代码主要针对 Chart.js 2.9.4 版本。Chart.js 3.x 及更高版本在插件 API 和轴的访问方式上有所不同，例如轴的 ID 可能会变为 x 和 y 而不是 x-axis-0。
- 插件执行时机: beforeDraw 钩子在图表元素绘制之前执行，因此绘制的背景和文本会位于图表内容之下。如果需要覆盖图表内容，可以考虑使用 afterDraw 钩子。
- 坐标转换: 理解 getPixelForValue() 的作用至关重要，它确保了数据值能够正确映射到 Canvas 上的像素位置。
- Canvas API 基础: 熟悉基本的 Canvas 2D 绘图 API (如 fillRect, fillText, strokeText, fillStyle, font 等) 将有助于更灵活地自定义图表外观。
- 响应式布局: 在响应式图表中，图表尺寸可能会变化。自定义插件中的坐标计算是基于当前的图表尺寸，因此通常能够很好地适应尺寸变化。
总结
为 Chart.js 折线图的特定Y轴区域添加背景色和文本标注，可以通过 chartjs-plugin-annotation 插件快速实现，也可以通过编写自定义 Chart.js 插件，在 beforeDraw 钩子中利用 Canvas API 进行更精细的控制。后者提供了最大的灵活性，适用于需要高度定制化或受限于不能使用额外插件的场景。选择哪种方法取决于具体的需求和项目约束。
