Chart.js目标进度图：动态堆叠柱状图教程

想要用图表清晰展示目标进度？本文为你提供一份详尽的Chart.js教程，教你如何创建动态堆叠柱状图，直观呈现当前进度与目标差距。通过巧妙的数据处理，将当前进度和距离目标所需的剩余量用不同颜色堆叠显示，例如蓝色代表已完成进度，红色则表示距离目标的剩余量。更智能的是，当进度达到或超过目标值时，红色剩余量部分会自动消失，清晰展示目标达成情况。本文将深入讲解Chart.js堆叠柱状图的核心概念与数据集管理，并提供详细的代码示例，助你轻松掌握这种实用的数据可视化技巧，让你的数据更具洞察力。

核心概念：Chart.js堆叠柱状图与数据集管理

Chart.js是一款功能强大的JavaScript图表库，它支持多种图表类型，包括柱状图。当我们需要在单个柱体中展示多个数据维度时，堆叠柱状图是理想的选择。在Chart.js中，堆叠柱状图通常通过定义多个数据集（datasets）来实现，每个数据集代表柱体中的一个层。通过配置图表的比例尺（scales），我们可以控制这些数据集是堆叠显示还是并排显示。

为了实现目标进度可视化，我们的策略是创建两个数据集：

1. 当前进度数据集： 表示已完成或当前的数值，例如用蓝色表示。
2. 剩余量数据集： 表示距离目标值还需多少，例如用红色表示。这个数据集的数据需要根据当前进度动态计算。

实现步骤：构建目标进度堆叠柱状图

要构建这种动态堆叠柱状图，关键在于数据预处理。我们不能直接将原始数据传递给Chart.js，而是需要先计算出每个类别距离目标值还差多少。

1. 数据准备与计算

假设我们的目标值是 60。对于每个数据点，我们需要判断其是否已达到目标。

• 如果当前值 e 小于目标值 60，那么剩余量为 60 - e。
• 如果当前值 e 大于或等于目标值 60，那么剩余量为 0（因为目标已达成或超出）。

这个计算过程可以在将数据传递给Chart.js之前完成。

// 原始数据示例
const originalData = [10, 5, 80]; // 对应 '通过', '失败', '进行中'
const targetValue = 60;

// 计算剩余量数据集
const remainingData = originalData.map(currentValue => {
  return currentValue >= targetValue ? 0 : targetValue - currentValue;
});

console.log("原始数据:", originalData);    // 输出: [10, 5, 80]
console.log("剩余量数据:", remainingData); // 输出: [50, 55, 0]

2. Chart.js配置与初始化

在计算出原始数据和剩余量数据后，我们就可以配置Chart.js来渲染图表了。

首先，确保你的HTML页面中有一个 元素来承载图表：

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

然后，在JavaScript中，获取Canvas上下文并初始化Chart.js：

(function() {
  const ctx = document.getElementById("mychart");

  // 原始数据，代表当前进度
  const currentProgressData = [10, 5, 80];
  const targetValue = 60; // 设定目标值

  // 计算距离目标还需多少的数据
  const requiredToTargetData = currentProgressData.map(e => (e >= targetValue ? 0 : targetValue - e));

  const chartData = {
    labels: ['通过', '失败', '进行中'], // 图表标签
    datasets: [{
      label: '当前进度', // 第一个数据集：当前进度
      data: currentProgressData,
      backgroundColor: [
        "rgba(75, 192, 192, 0.8)", // 绿色调示例
        "rgba(255, 99, 132, 0.8)",  // 红色调示例
        "rgba(255, 205, 86, 0.8)"   // 黄色调示例
      ],
      // 如果所有当前进度都用统一颜色，可以这样设置：
      // backgroundColor: 'rgba(54, 162, 235, 0.8)', // 蓝色调
    }, {
      label: '距离目标还需', // 第二个数据集：距离目标还需
      backgroundColor: 'rgba(255, 0, 0, 0.6)', // 统一用红色表示剩余量
      data: requiredToTargetData,
    }]
  };

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        stacked: true, // 确保X轴上的柱子是堆叠的
        grid: {
          display: false // 隐藏X轴网格线
        }
      },
      y: {
        stacked: true, // 确保Y轴上的柱子是堆叠的
        beginAtZero: true, // Y轴从0开始
        title: {
          display: true,
          text: '数值'
        },
        ticks: {
          callback: function(value) {
            // 可以自定义Y轴刻度显示，例如只显示整数
            if (Math.floor(value) === value) {
              return value;
            }
          }
        }
      }
    },
    plugins: {
      legend: {
        display: true,
        position: 'top',
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        callbacks: {
          label: function(context) {
            let label = context.dataset.label || '';
            if (label) {
              label += ': ';
            }
            if (context.parsed.y !== null) {
              label += context.parsed.y;
            }
            return label;
          }
        }
      }
    }
  };

  new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOptions
  });
})();

在上述代码中，我们做了以下关键处理：

• datasets 数组： 包含了两个对象，分别代表“当前进度”和“距离目标还需”的数据集。
• backgroundColor： 为每个数据集指定了颜色。对于“距离目标还需”的数据集，我们统一使用了红色。
• scales 配置： 在 x 轴和 y 轴的配置中都设置了 stacked: true，这明确告诉Chart.js将这些数据集堆叠起来显示。
• beginAtZero: true： 确保Y轴从0开始，避免数据被截断。
• plugins.tooltip： 优化了鼠标悬停提示框的显示，使其更具可读性。

关键点与注意事项

1. 数据集顺序： 在 datasets 数组中，数据集的顺序会影响它们在堆叠柱状图中的显示层次。通常，我们希望“当前进度”在下方，而“距离目标还需”在上方，所以将“当前进度”数据集放在前面。
2. stacked: true 配置： 虽然Chart.js在多个bar数据集存在时有时会自动堆叠，但为了确保一致性和明确性，建议在 scales.x 和 scales.y 中显式设置 stacked: true。
3. 动态数据更新： 如果你的数据是动态变化的，你需要重新计算 requiredToTargetData，然后更新Chart实例的 data.datasets[1].data，并调用 chart.update() 方法来刷新图表。
4. 目标值可配置性： 将 targetValue 作为一个可配置的变量，可以方便地调整目标。
5. 颜色选择： 选择对比鲜明且符合语义的颜色，例如用蓝色或绿色表示完成部分，用红色表示未完成或需要改进的部分，可以大大提高图表的可读性。
6. 标签与提示： 确保图表的标签（labels）和工具提示（tooltip）清晰明了，能准确传达每个部分的含义。

总结

通过对原始数据进行预处理，计算出距离目标所需的剩余量，并将其作为独立的Chart.js数据集进行渲染，我们成功地创建了一个动态的目标进度堆叠柱状图。这种方法不仅直观地展示了当前进度，还清晰地指出了距离目标尚有多少差距，并且在目标达成时自动隐藏了“剩余量”部分，为用户提供了极佳的视觉反馈。这种数据驱动的图表设计思路在多种业务场景中都具有广泛的应用价值。

以上就是《Chart.js目标进度图：动态堆叠柱状图教程》的详细内容，更多关于的资料请关注golang学习网公众号！