1. 理解需求：可视化目标达成度
在许多业务场景中，我们需要直观地展示某个指标的当前值与预设目标之间的关系。例如，项目完成度、销售额目标、生产配额等。传统的柱状图可能只能显示当前值，但如果能同时在一个柱状图中以堆叠形式展现“已完成”和“还需完成”的部分，将极大提升数据的可读性和决策效率。当当前值未达到目标时，图表应清晰显示还需要多少才能达标；而当目标达成甚至超越时，则不应显示“还需完成”的部分。
2. Chart.js简介与核心概念
Chart.js是一个开源的JavaScript图表库，它允许开发者使用canvas元素创建各种类型的图表，包括柱状图、折线图、饼图等。其核心优势在于轻量级、易用性强以及高度可定制化。
要创建图表，通常需要以下几个关键元素：
- HTML Canvas元素: 这是图表的渲染容器。
- 数据 (Data): 包含图表的标签（labels）和一系列数据集（datasets）。每个数据集定义了图表中的一组数据点、颜色等属性。
- 配置 (Options): 用于控制图表的行为和外观，例如轴的设置、工具提示、动画等。
3. 实现策略：数据预处理
要实现“当前值 + 剩余量”的堆叠柱状图，关键在于对原始数据进行预处理，将其转换为Chart.js能够理解的两个独立数据集：一个代表已完成的量，另一个代表距离目标还差的量。
假设我们的目标值是 TARGET = 60。对于每一个原始数据点 currentValue，我们需要计算出：
- 已完成量: 即 currentValue 本身。
- 待完成量: 如果 currentValue 小于 TARGET，则 待完成量 = TARGET - currentValue；否则，待完成量 = 0。
通过这种方式，我们可以为Chart.js准备两个数据集，它们将以堆叠的形式展示。
4. 构建Chart.js数据结构与配置
为了实现堆叠柱状图，我们需要在Chart.js的配置中明确指定 type: 'bar'，并且在轴的配置中启用堆叠模式。
HTML 结构：
首先，在HTML页面中创建一个canvas元素作为图表的容器。
JavaScript 数据与配置：
我们将定义两个数据集：一个用于表示当前值，另一个用于表示待完成的剩余量。
(function() {
const ctx = document.getElementById("mychart");
// 原始数据，例如：[已通过, 已失败, 进行中]
const initialData = [10, 5, 80];
const labels = ['Passed', 'Failed', 'In Progress'];
const targetValue = 60; // 设定目标值
// 计算待完成的数据集
const remainingData = initialData.map(e => (e >= targetValue ? 0 : targetValue - e));
// 构建Chart.js所需的数据结构
const datas = {
labels: labels,
datasets: [{
label: 'Current Amount', // 当前量
data: initialData,
backgroundColor: [
"green", // 例如，为“Passed”设置绿色
"blue", // 为“Failed”设置蓝色
"orange" // 为“In Progress”设置橙色
],
}, {
label: 'Remaining to Target', // 待完成量
backgroundColor: 'red', // 待完成量统一用红色显示
data: remainingData,
}]
};
// Chart.js 图表配置
const chr = new Chart(ctx, {
type: 'bar', // 图表类型为柱状图
data: datas,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true, // X轴启用堆叠
},
y: {
stacked: true, // Y轴启用堆叠
// 可以设置Y轴的最大值，例如略高于目标值，以确保图表完整显示
// max: targetValue + 10
}
}
}
});
})();5. 代码解析
- 获取 Canvas 上下文: const ctx = document.getElementById("mychart"); 获取HTML中canvas元素的2D渲染上下文，这是Chart.js绘制图表的基础。
-
定义原始数据与目标值:
- initialData: 包含了每个类别的当前值。
- labels: 对应initialData的标签。
- targetValue: 设定的目标值，例如60。
-
计算待完成量:
- const remainingData = initialData.map(e => (e >= targetValue ? 0 : targetValue - e));
- 这行代码是实现核心逻辑的关键。它遍历initialData数组中的每一个元素e。
- 如果e大于或等于targetValue，则表示目标已达成或超越，待完成量为0。
- 否则，待完成量为targetValue - e。
- map()方法会返回一个新的数组remainingData，其中包含了每个类别对应的待完成量。
-
构建 datas 对象:
- labels: 直接使用定义的labels。
- datasets 数组：
- 第一个数据集: label: 'Current Amount'，data: initialData，backgroundColor 可以根据每个类别设置不同的颜色，表示其自身的含义（如绿色表示通过，蓝色表示失败）。
- 第二个数据集: label: 'Remaining to Target'，data: remainingData，backgroundColor: 'red'。这里我们统一使用红色来表示距离目标的不足，这提供了一个清晰的视觉警告。
-
实例化 Chart:
- const chr = new Chart(ctx, { ... }); 创建一个新的Chart实例。
- type: 'bar': 指定图表类型为柱状图。
- data: datas: 传入我们准备好的数据。
- options:
- responsive: true 和 maintainAspectRatio: false: 确保图表在容器大小改变时能自适应。
- scales.x.stacked: true 和 scales.y.stacked: true: 这是实现堆叠效果的关键配置。它告诉Chart.js将属于同一类别的不同数据集的柱子堆叠起来。
6. 注意事项
- 数据动态性: 在实际应用中，initialData和targetValue通常会从后端API或其他数据源动态获取。您需要确保数据获取和预处理逻辑能够适应这些动态变化。
- 颜色语义: 选择具有明确语义的颜色非常重要。例如，绿色通常表示成功或完成，红色表示警告或不足，蓝色/黄色可以表示进行中或其他状态。
- 目标值的处理: 如果所有数据点都已达到或超过targetValue，那么remainingData数组将全部为0，图表中将不会显示红色的“待完成”部分，这正是我们期望的视觉效果。
- Chart.js 版本: 本教程的代码基于Chart.js v3及更高版本。如果您使用的是旧版本（如v2），API可能会略有不同，特别是scales的配置方式。
- 图表尺寸与响应式: div容器的width和height属性可以控制图表的初始尺寸。options.responsive: true和maintainAspectRatio: false有助于图表在不同屏幕尺寸下保持良好的显示效果。
7. 总结
通过对原始数据进行简单的预处理，我们成功地利用Chart.js创建了一个功能强大的堆叠柱状图，它不仅展示了当前值，还直观地呈现了距离目标还需努力的部分。这种数据可视化方法在项目管理、目标追踪等场景中具有很高的实用价值。掌握这种数据转换技巧，将使您能够利用Chart.js实现更复杂、更富有洞察力的图表。
