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

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

霞舞

发布： 2025-10-03 13:31:12

原创

289人浏览过

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

本文将指导您如何利用Chart.js实现一种特殊的堆叠柱状图，它能直观地展示当前进度与达成预设目标所需的剩余量。核心方法是通过数据预处理计算出目标差值，并将其作为独立的图表数据集与当前进度数据进行堆叠展示，从而清晰地可视化任务完成情况，尤其是在目标未达时突出显示差距。

引言：可视化目标进度与剩余量

在项目管理、销售业绩追踪或个人目标达成等场景中，我们常常需要清晰地了解当前进展以及距离最终目标还有多远。传统的柱状图可以展示当前值，但如果能直观地将“已完成”与“待完成”以堆叠的形式呈现，将大大提高数据的可读性和决策效率。本文将详细介绍如何使用强大的javascript图表库chart.js来实现这种带有目标进度的堆叠柱状图。

核心原理：数据预处理与多数据集堆叠

Chart.js的bar类型图表天生支持多数据集的堆叠展示。其核心思想是：

当前进度数据集： 表示已完成或当前的数值。
目标差值数据集： 表示距离目标还需完成的数值。这个数据集是动态计算的：如果当前进度已达到或超过目标，则差值为0；否则，差值为“目标值 - 当前进度”。
堆叠配置： 确保Chart.js将这两个数据集在同一个柱子上进行堆叠显示，而不是并排显示。

通过这种方式，当一个任务达到目标时，代表“待完成”的柱状部分将消失；而当任务未达目标时，它会以不同的颜色清晰地显示出还需要多少努力。

实现步骤

下面我们将通过具体的代码示例，分步讲解如何构建这样的图表。

1. 准备HTML画布与Chart.js基础配置

首先，您需要在HTML页面中创建一个canvas元素作为图表的渲染区域，并确保已引入Chart.js库。

<!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: 600px;
      height: 400px;
      margin: 20px auto;
      border: 1px solid #eee;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="progressChart"></canvas>
  </div>

  <script>
    // Chart.js 代码将在这里编写
  </script>
</body>
</html>

登录后复制

接下来，在JavaScript中定义您的初始数据结构。假设我们有三个类别（'Passed', 'Failed', 'In Progress'），以及它们对应的当前值。

(function() {
  const ctx = document.getElementById("progressChart").getContext('2d');

  const initialData = {
    labels: ['通过', '失败', '进行中'],
    datasets: [{
      label: '当前进度',
      data: [10, 5, 80], // 示例数据：当前值
      backgroundColor: [
        "rgba(75, 192, 192, 0.8)", // 绿色系
        "rgba(255, 99, 132, 0.8)",  // 红色系
        "rgba(255, 205, 86, 0.8)"   // 黄色系
      ],
    }]
  };

  // 后续代码将在此处添加
})();

登录后复制

2. 计算目标差值数据集

设定一个目标值（例如60），然后遍历当前进度数据，计算每个类别距离目标还差多少。如果当前值已达到或超过目标，则差值为0。

图酷AI

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

查看详情

(function() {
  const ctx = document.getElementById("progressChart").getContext('2d');
  const targetValue = 60; // 设定目标值

  const initialData = {
    labels: ['通过', '失败', '进行中'],
    datasets: [{
      label: '当前进度',
      data: [10, 5, 80],
      backgroundColor: [
        "rgba(75, 192, 192, 0.8)",
        "rgba(255, 99, 132, 0.8)",
        "rgba(255, 205, 86, 0.8)"
      ],
    }]
  };

  // 计算距离目标还差多少的数据
  const remainingData = initialData.datasets[0].data.map(currentValue => {
    return currentValue >= targetValue ? 0 : targetValue - currentValue;
  });

  // 后续代码将在此处添加
})();

登录后复制

3. 添加差值数据集并配置图表

将计算出的remainingData作为第二个数据集添加到initialData.datasets数组中。这个数据集将使用一种不同的颜色（例如鲜艳的红色）来突出显示“待完成”的部分。

关键一步：为了确保这两个数据集正确堆叠，您需要在图表的options中配置scales下的x轴和y轴的stacked属性为true。

(function() {
  const ctx = document.getElementById("progressChart").getContext('2d');
  const targetValue = 60; // 设定目标值

  const initialData = {
    labels: ['通过', '失败', '进行中'],
    datasets: [{
      label: '当前进度',
      data: [10, 5, 80],
      backgroundColor: [
        "rgba(75, 192, 192, 0.8)",
        "rgba(255, 99, 132, 0.8)",
        "rgba(255, 205, 86, 0.8)"
      ],
    }]
  };

  const remainingData = initialData.datasets[0].data.map(currentValue => {
    return currentValue >= targetValue ? 0 : targetValue - currentValue;
  });

  // 添加第二个数据集：距离目标
  initialData.datasets.push({
    label: '距离目标',
    backgroundColor: 'rgba(255, 0, 0, 0.6)', // 使用红色突出显示剩余量
    data: remainingData
  });

  // 初始化Chart.js图表
  const progressChart = new Chart(ctx, {
    type: 'bar', // 指定图表类型为柱状图
    data: initialData,
    options: {
      responsive: true,
      maintainAspectRatio: false, // 允许容器控制宽高
      scales: {
        x: {
          stacked: true, // X轴堆叠
          title: {
            display: true,
            text: '类别'
          }
        },
        y: {
          stacked: true, // Y轴堆叠
          beginAtZero: true, // Y轴从0开始
          max: targetValue, // 设置Y轴最大值为目标值，使图表更聚焦
          title: {
            display: true,
            text: '值'
          }
        }
      },
      plugins: {
        tooltip: {
          mode: 'index',
          intersect: false
        },
        title: {
          display: true,
          text: '任务进度与目标达成情况 (目标: ' + targetValue + ')'
        }
      }
    }
  });
})();

登录后复制

完整示例代码

将以上所有部分整合，您将得到一个完整的HTML文件，可以直接在浏览器中运行：

<!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: 600px;
      height: 400px;
      margin: 20px auto;
      border: 1px solid #eee;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
      background-color: #fff;
      padding: 15px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="progressChart"></canvas>
  </div>

  <script>
    (function() {
      const ctx = document.getElementById("progressChart").getContext('2d');
      const targetValue = 60; // 设定目标值

      const chartData = {
        labels: ['通过', '失败', '进行中'],
        datasets: [{
          label: '当前进度',
          data: [10, 5, 80], // 示例数据：当前值
          backgroundColor: [
            "rgba(75, 192, 192, 0.8)", // 绿色系
            "rgba(255, 99, 132, 0.8)",  // 红色系
            "rgba(255, 205, 86, 0.8)"   // 黄色系
          ],
          borderColor: [
            "rgba(75, 192, 192, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(255, 205, 86, 1)"
          ],
          borderWidth: 1
        }]
      };

      // 计算距离目标还差多少的数据
      const remainingData = chartData.datasets[0].data.map(currentValue => {
        return currentValue >= targetValue ? 0 : targetValue - currentValue;
      });

      // 添加第二个数据集：距离目标
      chartData.datasets.push({
        label: '距离目标',
        backgroundColor: 'rgba(255, 0, 0, 0.6)', // 使用红色突出显示剩余量
        borderColor: 'rgba(255, 0, 0, 1)',
        borderWidth: 1,
        data: remainingData
      });

      // 初始化Chart.js图表
      const progressChart = new Chart(ctx, {
        type: 'bar', // 指定图表类型为柱状图
        data: chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false, // 允许容器控制宽高
          scales: {
            x: {
              stacked: true, // X轴堆叠
              title: {
                display: true,
                text: '类别'
              }
            },
            y: {
              stacked: true, // Y轴堆叠
              beginAtZero: true, // Y轴从0开始
              max: targetValue, // 设置Y轴最大值为目标值，使图表更聚焦
              title: {
                display: true,
                text: '值'
              }
            }
          },
          plugins: {
            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;
                }
              }
            },
            title: {
              display: true,
              text: '任务进度与目标达成情况 (目标: ' + targetValue + ')',
              font: {
                size: 16
              }
            },
            legend: {
              position: 'top',
            }
          }
        }
      });
    })();
  </script>
</body>
</html>

登录后复制

关键点与最佳实践

目标值动态化： 在实际应用中，targetValue通常是可变的。建议将其定义为配置变量或从后端获取，以增加图表的灵活性。
颜色语义化： 选择具有明确含义的颜色非常重要。例如，绿色或蓝色代表已完成，红色代表待完成或风险，黄色代表进行中。这有助于用户快速理解图表信息。
stacked: true 的重要性： 再次强调，scales选项中的stacked: true是实现堆叠柱状图的关键。如果没有这个配置，多个数据集的柱子将并排显示。
Y轴最大值： 将Y轴的最大值(y.max)设置为targetValue可以使图表更加聚焦，清晰地展示目标线。如果某些数据点远超目标，可能需要调整此设置。
数据源管理： 对于更复杂的数据，建议将数据处理逻辑封装成函数，使其更易于维护和复用。
响应式设计： responsive: true 和 maintainAspectRatio: false 选项有助于图表在不同屏幕尺寸下良好地适应容器。

总结

通过数据预处理和Chart.js的多数据集堆叠功能，我们可以轻松创建出直观且富有洞察力的目标进度堆叠柱状图。这种方法不仅清晰地展示了当前成就，还以视觉化的方式突出了距离目标的差距，为决策者提供了有价值的信息。您可以根据具体需求调整数据计算逻辑、颜色方案和图表选项，以构建出最适合您应用场景的自定义图表。

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