使用Chart.js创建带目标值的堆叠柱状图：可视化进度与剩余量

1. 理解需求：可视化目标达成度

在许多业务场景中，我们需要直观地展示某个指标的当前值与预设目标之间的关系。例如，项目完成度、销售额目标、生产配额等。传统的柱状图可能只能显示当前值，但如果能同时在一个柱状图中以堆叠形式展现“已完成”和“还需完成”的部分，将极大提升数据的可读性和决策效率。当当前值未达到目标时，图表应清晰显示还需要多少才能达标；而当目标达成甚至超越时，则不应显示“还需完成”的部分。

2. Chart.js简介与核心概念

Chart.js是一个开源的JavaScript图表库，它允许开发者使用canvas元素创建各种类型的图表，包括柱状图、折线图、饼图等。其核心优势在于轻量级、易用性强以及高度可定制化。

要创建图表，通常需要以下几个关键元素：

• HTML Canvas元素: 这是图表的渲染容器。
• 数据 (Data): 包含图表的标签（labels）和一系列数据集（datasets）。每个数据集定义了图表中的一组数据点、颜色等属性。
• 配置 (Options): 用于控制图表的行为和外观，例如轴的设置、工具提示、动画等。

3. 实现策略：数据预处理

要实现“当前值 + 剩余量”的堆叠柱状图，关键在于对原始数据进行预处理，将其转换为Chart.js能够理解的两个独立数据集：一个代表已完成的量，另一个代表距离目标还差的量。

假设我们的目标值是 TARGET = 60。对于每一个原始数据点 currentValue，我们需要计算出：

1. 已完成量: 即 currentValue 本身。
2. 待完成量: 如果 currentValue 小于 TARGET，则 待完成量 = TARGET - currentValue；否则，待完成量 = 0。

通过这种方式，我们可以为Chart.js准备两个数据集，它们将以堆叠的形式展示。

4. 构建Chart.js数据结构与配置

为了实现堆叠柱状图，我们需要在Chart.js的配置中明确指定 type: 'bar'，并且在轴的配置中启用堆叠模式。

图酷AI

下载即用！可以免费使用的AI图像处理工具，致力于为用户提供最先进的AI图像处理技术，让图像编辑变得简单高效。

57

查看详情

HTML 结构：

首先，在HTML页面中创建一个canvas元素作为图表的容器。

<div style="width: 500px;height: 300px">
  <canvas id="mychart"></canvas>
</div>

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. 代码解析

1. 获取 Canvas 上下文: const ctx = document.getElementById("mychart"); 获取HTML中canvas元素的2D渲染上下文，这是Chart.js绘制图表的基础。
2. 定义原始数据与目标值:
   • initialData: 包含了每个类别的当前值。
   • labels: 对应initialData的标签。
   • targetValue: 设定的目标值，例如60。
3. 计算待完成量:
   • const remainingData = initialData.map(e => (e >= targetValue ? 0 : targetValue - e));
   • 这行代码是实现核心逻辑的关键。它遍历initialData数组中的每一个元素e。
   • 如果e大于或等于targetValue，则表示目标已达成或超越，待完成量为0。
   • 否则，待完成量为targetValue - e。
   • map()方法会返回一个新的数组remainingData，其中包含了每个类别对应的待完成量。
4. 构建 datas 对象:
   • labels: 直接使用定义的labels。
   • datasets 数组：
     • 第一个数据集: label: 'Current Amount'，data: initialData，backgroundColor 可以根据每个类别设置不同的颜色，表示其自身的含义（如绿色表示通过，蓝色表示失败）。
     • 第二个数据集: label: 'Remaining to Target'，data: remainingData，backgroundColor: 'red'。这里我们统一使用红色来表示距离目标的不足，这提供了一个清晰的视觉警告。
5. 实例化 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实现更复杂、更富有洞察力的图表。

以上就是使用Chart.js创建带目标值的堆叠柱状图：可视化进度与剩余量的详细内容，更多请关注php中文网其它相关文章！