本教程旨在指导如何在 chart.js 2.x 折线图中，为特定的y轴数值范围添加自定义背景色和文本标注。文章将介绍两种实现方法：利用 `chartjs-plugin-annotation` 插件进行快速配置，以及通过编写自定义 chart.js 插件，在 `beforedraw` 钩子中直接使用 canvas api 进行精确绘制，以满足更灵活或无插件限制的需求。
在数据可视化中，有时我们需要突出图表中特定数值范围的重要性，例如用不同颜色标记“显著”或“严重”区域，并配以相应的文本说明。对于 Chart.js 2.x 版本的折线图，实现这一需求有多种途径。
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 提供的插件核心 API，特别是 beforeDraw 钩子，我们可以在图表绘制之前直接在 Canvas 上进行绘制。
Chart.js 插件提供了一系列生命周期钩子函数，允许开发者在图表的不同绘制阶段介入。beforeDraw 钩子会在图表的数据集、轴线等元素绘制之前执行。这意味着我们可以在此阶段绘制背景区域和文本，而不会被后续的图表元素覆盖。
在 beforeDraw(chart) 钩子中，chart 参数提供了对整个图表实例的访问，包括其绘图上下文 (chart.ctx) 和所有轴 (chart.scales)。
首先，在自定义插件的 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 上的垂直像素坐标。
有了轴的像素坐标后，我们就可以使用 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);
}
}
}]将上述自定义插件集成到 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 折线图的特定Y轴区域添加背景色和文本标注，可以通过 chartjs-plugin-annotation 插件快速实现，也可以通过编写自定义 Chart.js 插件，在 beforeDraw 钩子中利用 Canvas API 进行更精细的控制。后者提供了最大的灵活性，适用于需要高度定制化或受限于不能使用额外插件的场景。选择哪种方法取决于具体的需求和项目约束。
以上就是Chart.js 2.x 折线图特定Y轴区域背景着色与文本标注教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
180
收藏
