Question

单杠有问题。我想显示剩下的日子才能收到付款的产品。我要这个：一个横条，其中包含2个数据，一个是他将收到产品的总天数，另一个是实际完成的天数。我现在有这个，它不能按我想要的方式工作

<div>
 <canvas id="bar-chart-horizontal" width="50px" height="50px"></canvas>
</div>
<script type="text/javascript">
var myChart = new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'horizontalBar',
        data: {
          labels: ["Days to recive your product"],
          datasets: [
            {
              backgroundColor: ["#ff0000"],
              data: [10]
            }
          ]
        },
        options: {
          legend: { display: false },
        }



   });
</script>

我想要带有2个数据示例的条形图，其中1天完成了10天

Answer 1

以下是基于您的代码的示例。

您应该将2d上下文传递到图表

var ctx = document.getElementById('canvas').getContext('2d');

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["Days to receive your product"],
    datasets: [{
      backgroundColor: ["red"],
      data: [3]
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true,
        barPercentage: 1,
        ticks: {
          min: 0,
          max: 10
        }
      }, {
        display: false,
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="canvas" height=80></canvas>

如何在画布上自定义水平条？

1 个答案: