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]

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

(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
  });
})();