使用Chart.js创建目标进度堆叠柱状图-html教程-PHP中文网

使用Chart.js创建目标进度堆叠柱状图

碧海醫心

发布： 2025-10-03 14:38:00

原创

557人浏览过

使用Chart.js创建目标进度堆叠柱状图

本教程将指导您如何利用Chart.js制作一个直观的堆叠柱状图，以可视化项目或任务的进度。图表将清晰展示当前已完成的量和距离目标所需的剩余量。当目标达成或超出时，表示剩余量的红色部分将自动隐藏，从而提供一个动态且易于理解的进度展示。

引言

在数据可视化中，展示某项指标距离预设目标还有多远是一种常见的需求。例如，一个销售团队需要达成60个销售目标，我们希望图表能清晰地显示当前已完成的数量，以及还需要多少才能达标。当目标达成时，表示“还需要”的部分应自动消失。chart.js作为一个强大的javascript图表库，可以灵活地实现这种动态的进度展示。

核心原理：数据预处理与多数据集策略

实现这种带有目标进度的堆叠柱状图，其核心思想在于：

数据预处理： 在将数据传递给Chart.js之前，计算出每个数据点距离目标值还差多少。如果当前值已经达到或超过目标，则“还差”的值为0。
多数据集堆叠： 使用两个数据集来构建图表。第一个数据集表示当前的实际完成量，第二个数据集则表示距离目标还差的量。通过将这两个数据集堆叠起来，可以直观地展示总进度。

这种方法巧妙地利用了Chart.js的堆叠特性，同时通过数据预处理实现了动态显示“剩余量”的需求。

实现步骤

1. HTML 结构准备

首先，在HTML页面中创建一个canvas元素，Chart.js将在这个画布上绘制图表。同时，为了更好地控制图表大小，可以为其父容器设置样式。

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

登录后复制

2. 数据准备与计算

这是实现动态进度的关键一步。我们需要定义一个目标值（例如60），然后根据每个数据点的当前值来计算距离目标还差多少。

假设我们有以下初始数据：

落笔AI

AI写作，AI写网文、AI写长篇小说、短篇小说

查看详情

const initialData = [10, 5, 80]; // 示例：Passed, Failed, In Progress
const targetValue = 60;

登录后复制

我们将为“当前值”和“剩余值”分别创建数据集。其中，“剩余值”的数据需要通过计算得到：

const datas = {
  labels: ['Passed', 'Failed', 'In Progress'],
  datasets: [{
    label: '当前值', // 表示已完成或当前量
    data: initialData,
    backgroundColor: [
      "green", // 示例颜色，可根据需要调整
      "blue",
      "yellow"
    ],
  }]
};

// 计算距离目标还差多少的数据
// 如果当前值大于等于目标值，则剩余为0；否则为目标值减去当前值
const remainingData = datas.datasets[0].data.map(e => (e >= targetValue ? 0 : targetValue - e));

// 将计算出的剩余量作为一个新的数据集添加到图表中
datas.datasets.push({
  label: '距离目标所需', // 表示距离目标还差的量
  backgroundColor: 'red', // 用红色表示未达成的部分
  data: remainingData
});

登录后复制

3. Chart.js 配置

接下来，使用Chart.js的构造函数初始化图表。确保type设置为'bar'。Chart.js通常会自动堆叠多个数据集的柱状图，但如果需要显式控制，可以在options.scales中设置stacked: true。

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

const chr = new Chart(ctx, {
  data: datas,
  type: 'bar',
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        stacked: true // 确保X轴堆叠
      },
      y: {
        stacked: true // 确保Y轴堆叠
      }
    }
  }
});

登录后复制

完整示例代码

将上述所有部分组合起来，形成一个完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js 目标进度堆叠柱状图</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: sans-serif; }
    .chart-container {
      width: 500px;
      height: 300px;
      margin: 20px auto;
      border: 1px solid #ddd;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  <div class="chart-container">
    <canvas id="mychart"></canvas>
  </div>

  <script>
    (function() {
      const ctx = document.getElementById("mychart");
      const targetValue = 60; // 设定目标值

      const initialDataForCurrent = [10, 5, 80]; // 示例数据：Passed, Failed, In Progress

      const datas = {
        labels: ['Passed', 'Failed', 'In Progress'],
        datasets: [{
          label: '当前值',
          data: initialDataForCurrent,
          backgroundColor: [
            "green", // Passed
            "blue",  // Failed
            "yellow" // In Progress
          ],
        }]
      };

      // 计算距离目标还差多少的数据
      // 如果当前值 >= 目标值，则剩余为0；否则为目标值 - 当前值
      const remainingData = datas.datasets[0].data.map(e => (e >= targetValue ? 0 : targetValue - e));

      // 将计算出的剩余量作为一个新的数据集添加到图表中
      datas.datasets.push({
        label: '距离目标所需',
        backgroundColor: 'red', // 用红色表示未达成的部分
        data: remainingData
      });

      const chr = new Chart(ctx, {
        data: datas,
        type: 'bar',
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: `任务进度与目标 (目标: ${targetValue})`
            },
            tooltip: {
              mode: 'index',
              intersect: false
            }
          },
          scales: {
            x: {
              stacked: true, // 确保X轴堆叠
            },
            y: {
              stacked: true, // 确保Y轴堆叠
              beginAtZero: true, // Y轴从0开始
              title: {
                display: true,
                text: '数量'
              }
            }
          }
        }
      });
    })();
  </script>

</body>
</html>

登录后复制

注意事项

目标值设定： 确保targetValue变量的设置准确反映您的业务目标。
颜色选择： 选择对比鲜明的颜色来区分“当前值”和“距离目标所需”的部分，提高图表的可读性。
动态数据更新： 如果图表数据是动态变化的，每次数据更新时，都需要重新计算remainingData并调用chart.update()方法来刷新图表。
Chart.js 版本： 本教程基于Chart.js v3.x及以上版本。如果您使用的是旧版本（如v2.x），部分配置选项（如scales的结构）可能会有所不同。
堆叠行为： 尽管Chart.js通常会自动堆叠多个数据集的柱状图，但在options.scales中显式设置stacked: true是一个良好的实践，可以确保在各种配置下都能按预期工作。