在数据可视化中，展示一个值距离某个目标还有多远是一种常见的需求。传统的柱状图可能只显示当前值，但如果能同时在一个柱状图中直观地看到“已完成”和“还需完成”两部分，将大大提升图表的信息传达效率。本教程将详细介绍如何使用强大的 chart.js 库来实现这种带有目标完成度指示的堆叠柱状图。
核心概念：目标达成度可视化
我们的目标是创建一个堆叠柱状图，其中：
- 已完成量：代表当前的已完成进度，例如使用蓝色柱体。
- 距离目标量：代表距离预设目标还需完成的量，例如使用红色柱体。
- 智能隐藏：当当前完成量达到或超过目标时，表示“距离目标量”的红色柱体应自动消失，只显示已完成的蓝色柱体。
例如，假设我们的目标是 60。如果当前值是 40，图表应显示 40 的蓝色部分和 20 的红色部分。如果当前值是 60 或 70，则只显示 60 或 70 的蓝色部分，不显示红色部分。
Chart.js 基础设置回顾
在深入实现之前，我们先回顾一个基本的 Chart.js 柱状图结构。通常，我们需要一个 canvas> 元素作为图表的容器，并通过 JavaScript 初始化 Chart 实例，传入数据和配置。
(function() {
const ctx = document.getElementById("mychart");
const datas = {
labels: ['通过', '失败', '进行中'],
datasets: [{
label: '数据',
data: [10, 5, 80],
backgroundColor: [
"green",
"red",
"yellow"
],
}, ]
};
const chr = new Chart(ctx, {
data: datas,
type: 'bar'
});
})();上述代码展示了一个简单的柱状图，但它并未实现我们所需的目标完成度可视化功能。
实现目标堆叠柱状图
要实现目标完成度堆叠柱状图，关键在于数据预处理。我们需要在将数据传递给 Chart.js 之前，计算出每个数据点距离目标的剩余量，并将其作为一个独立的 dataset 添加到图表中。
数据处理逻辑
假设我们的目标值是 60。对于原始数据集中的每个数据点 currentValue：
- 如果 currentValue 大于或等于 60（目标已达成或超越），那么剩余量为 0。
- 如果 currentValue 小于 60（目标尚未达成），那么剩余量为 60 - currentValue。
这个计算可以通过 Array.prototype.map() 方法高效完成。
const targetValue = 60; // 定义目标值
const originalData = datas.datasets[0].data; // 获取原始数据
const remainingData = originalData.map(currentValue => {
return currentValue >= targetValue ? 0 : targetValue - currentValue;
});构建新的数据集
计算出 remainingData 后，我们需要将其作为一个新的 dataset 添加到 datas.datasets 数组中。这个新的数据集将代表“距离目标量”的部分，并应使用一个醒目的颜色，例如红色。
datas.datasets.push({
label: '距离目标', // 新数据集的标签
backgroundColor: 'red', // 剩余量的颜色
data: remainingData // 剩余量数据
});Chart.js 在处理多个 type: 'bar' 的 dataset 时，默认会将其堆叠起来，除非显式设置 options.scales.x.stacked: false 或 options.scales.y.stacked: false。这正是我们想要的效果。
完整代码示例
将上述逻辑整合到 Chart.js 的初始化代码中：
Chart.js 目标完成度堆叠柱状图 Chart.js 目标完成度堆叠柱状图示例
