Chart.js折线图Y轴着色与标注方法
时间：2025-12-06 08:36:33 342浏览 收藏
从现在开始，努力学习吧！本文《Chart.js 折线图Y轴区域着色与标注教程》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！
本教程旨在指导如何在 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 引入插件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
然后，在 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 的配置中，即可实现预期效果。
<!DOCTYPE html>
<html>
<head>
<title>Chart.js 特定区域背景着色</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js" integrity="sha512-zO8oeHCxetPn1Hd9PdDleg5Tw1bAaP0YmNvPY8CwcRyUk7d7/+nyElmFrB6f7vg4f7Fv4sui1mcep8RIEShczg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body { margin: 0; overflow: hidden; }
#lineChart { width: 99vw; height: 99vh; }
</style>
</head>
<body>
<canvas id="lineChart"></canvas>
<script>
var ctx = document.getElementById("lineChart").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
// 将自定义插件添加到 plugins 数组中
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'],
[y80, y100, 'rgba(100, 100, 100, 0.8)', 'Severe']
];
for (const [yStart, yEnd, color, text] of bands) {
ctx.fillStyle = color;
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';
ctx.fillText(text, xMax - 10, (yEnd + yStart) / 2);
ctx.strokeText(text, xMax - 10, (yEnd + yStart) / 2);
}
}
}],
data: {
labels: [
"",
"Working Memory",
"Inhibitory Control",
"Cognitive Flexibility",
"High Order EF",
"",
],
datasets: [
{
label: "Competence score in Percent",
data: [null, 80, 65, 90, 75],
borderColor: ["#000", "#ffdb14", "#ff0000", "#38b7fe", "#8866f9"],
backgroundColor: [
"#000",
"#ffdb14",
"#ff0000",
"#38b7fe",
"#8866f9",
],
fill: false,
pointRadius: 16,
pointHoverRadius: 8,
pointBackgroundColor: [
"#000",
"#ffdb14",
"#ff0000",
"#38b7fe",
"#8866f9",
],
lineTension: 0,
borderColor: "#000",
borderWidth: 2,
},
],
},
options: {
responsive: true,
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Subtests",
fontSize: 24,
},
ticks: {
fontSize: 24,
},
},
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: "Competence score in Percent",
fontSize: 24,
},
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 25,
fontSize: 24,
},
},
],
},
legend: {
display: false,
},
},
});
</script>
</body>
</html>注意事项
- 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 进行更精细的控制。后者提供了最大的灵活性，适用于需要高度定制化或受限于不能使用额外插件的场景。选择哪种方法取决于具体的需求和项目约束。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
167 收藏
-
459 收藏
-
388 收藏
-
312 收藏
-
493 收藏
-
224 收藏
-
224 收藏
-
411 收藏
-
499 收藏
-
293 收藏
-
413 收藏
-
145 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习