在数据可视化中，展示一个值距离某个目标还有多远是一种常见的需求。传统的柱状图可能只显示当前值，但如果能同时在一个柱状图中直观地看到“已完成”和“还需完成”两部分，将大大提升图表的信息传达效率。本教程将详细介绍如何使用强大的 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：

玄鲸Timeline

一个AI驱动的历史时间线生成平台

下载

• 如果 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 目标完成度堆叠柱状图示例