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

我的单杠有问题。我想显示收到产品的剩余天数。 我想要这个： 一个带有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>

var myChart=新图表（document.getElementById（“水平条形图”）{
键入：“水平线”，
数据：{
标签：[“收到产品的天数”]，
数据集：[
{
背景颜色：[“ff0000”]，
数据：[10]
}
]
},
选项：{
图例：{display:false}，
}
});

---

我想要带2个数据的条示例1天完成10天以下是基于您的代码的示例

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

var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“水平线”，
数据：{
标签：[“收到产品的天数”]，
数据集：[{
背景颜色：[“红色”]，
数据：[3]
}]
},
选项：{
图例：{
显示：假
},
比例：{
xAxes：[{
显示：对，
百分比：1，
滴答声：{
分:0,，
最多：10
}
}, {
显示：假，
}]
}
}
});
知道如何在栏的右侧添加文本吗？例如4天/10天？