Как я могу настроить горизонтальный бар на холсте?

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>