Question

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

这是两个条形图，每个条形图都有一个灰色区域，这是它自己的100％或最大值。这只是一个模型，所以我们可以假设我们正在使用一个酒吧。
我正在使用有角度的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>

如何在角度条形图中显示进度？

1 个答案: