ChartJS 我想使用图表js制作一个目标值为60的堆叠条形图

u59ebvdq 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(144)

我想用chartjs创建一个条形图，它将显示达到60还需要多少，这将在上面的红色条中显示。下面将用蓝色显示当前数量。假设我必须达到60，而当前值是40，条形图应该用红色显示还需要20才能达到60。如果达到60，上面不应该有任何红条。2有什么办法可以做到这一点吗？

(function() {

 var ctx = document.getElementById("mychart");

  var datas = {
    labels: ['Passed', 'Failed', 'In Progress'],
    datasets: [{
      label: 'Data',
      data: [10, 5, 80],
      backgroundColor: [
        "green",
        "red",
        "yellow"
      ],
    }, ]
  };

  var chr = new Chart(ctx, {
    data: datas,
    type: 'bar'
  });

})();

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

chart.js

来源：https://stackoverflow.com/questions/72977337/i-want-to-make-a-stacked-bar-graph-which-has-target-of-60-using-chart-js

1条答案

按热度按时间

nfg76nw01#

是的，您可以在将其发送到chart.js以绘制图表之前简单地计算它：

(function() {
  const ctx = document.getElementById("mychart");

  const datas = {
    labels: ['Passed', 'Failed', 'In Progress'],
    datasets: [{
      label: 'Data',
      data: [10, 5, 80],
      backgroundColor: [
        "green",
        "red",
        "yellow"
      ],
    }, ]
  };

  const newData = datas.datasets[0].data.map(e => (e >= 60 ? 0 : 60 - e))

  datas.datasets.push({
    label: 'extra',
    backgroundColor: 'red',
    data: newData
  })

  const chr = new Chart(ctx, {
    data: datas,
    type: 'bar'
  });
})();

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

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 我想使用图表js制作一个目标值为60的堆叠条形图

1条答案

相关问题

热门标签

最新问答