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>