angular - 如何在 Angular 条形图中展示进度？

Question

有人知道我如何在这里实现这样的目标吗？

这是两个条形图，每个条形图都有一个灰色区域，即其自己的 100% 或最大值。这只是一个模型，所以我们可以假设我们正在使用一个酒吧。
我正在使用 Angular ChartJS，但无法绘制类似模型中的内容。

我试过了

  barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [
        {
          ticks: {
            max: 75,
            callback: function (value) {
              return ((value / 75) * 100).toFixed(0);
            }
          }
        }
      ]
    }
  };
  barChartData: ChartDataSets[] = [{ data: [50] }];

但这不会产生任何可用的结果。
如果我想要的只是模型中描绘的酒吧，我是否走在正确的轨道上？甚至不确定这里使用 Chartjs 库是否是正确的选择。
实际上，我想展示的是:“最大数量为 75(即灰色区域)，但到目前为止我已经有 50(即彩色区域)”

Answer 1

只要您只是构建一个“单一百分比条”，那么在 Chart.js 中实现这一点就足够简单了。将比例设置为 max: 100 和 min: 0，然后只绘制蓝色条:

new Chart(document.getElementById('chart'), {
  type: 'horizontalBar',
  data: {
    datasets: [{
      backgroundColor: '#249DD6',
      barPercentage: 1,
      categoryPercentage: 1,
      data: [25]
    }]
  },
  options: {
    legend: {
      display: false
    },
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        display: false,
        ticks: {
          max: 100,
          min: 0
        }
      }],
      yAxes: [{
        display: false
      }]
    }
  }
});

canvas {
  background-color: #D6D7D9
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="25px"></canvas>