如何使用Chart.js制作目标值为60的缺口提示堆叠柱状图

实现逻辑 #

• 开启柱状图堆叠能力，单根柱体拆分为两个垂直叠加的数据系列
• 第一个系列为已完成数值：使用蓝色填充，直接传入原始统计值
• 第二个系列为待补足差额：使用红色填充，基于固定目标值60逐值计算：
  • 统计值小于60：差额值为60减去统计值
  • 统计值大于等于60：差额值设为0，该段柱体自动不渲染
• 两个数据系列配置相同的堆叠组标识，X、Y轴同步开启堆叠开关，保证柱体对齐叠加

改造后完整代码 #

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

<script>
(function() {
  // 固定目标值
  const TARGET = 60;
  var ctx = document.getElementById("mychart");
  // 原始统计数据
  const sourceData = [10, 5, 80];
  // 计算差额数据
  const gapData = sourceData.map(val => val < TARGET ? TARGET - val : 0);

  var datas = {
    labels: ['Passed', 'Failed', 'In Progress'],
    datasets: [
      {
        label: '已完成数值',
        data: sourceData,
        backgroundColor: 'blue',
        stack: 'statusStack'
      },
      {
        label: '待补足差额',
        data: gapData,
        backgroundColor: 'red',
        stack: 'statusStack'
      }
    ]
  };

  var chr = new Chart(ctx, {
    data: datas,
    type: 'bar',
    options: {
      responsive: true,
      scales: {
        x: {
          stacked: true
        },
        y: {
          stacked: true,
          beginAtZero: true
        }
      }
    }
  });
})();
</script>

效果说明 #

• 统计值10：蓝色柱高度10，红色柱高度50，柱体总高度60
• 统计值5：蓝色柱高度5，红色柱高度55，柱体总高度60
• 统计值80：蓝色柱高度80，红色差额值为0，无红色柱段展示，满足达标后隐藏差额的要求

内容的提问来源于stack exchange，提问作者Thaneshvaran Ravendran