Typescript HTML画布5中不带库的水平条形图

我正在尝试制作动态水平条形图，使用动态宽度，当我更改画布宽度和高度时，它会相应地调整水平条的位置（画布HTML5），而无需任何库。 我通过x轴和y轴的计算动态步长

    // Y-axis label
    var labelonYaxis = 4;
    var StepSizeY = 1;
    for (let index = 0; index < StepSizeOptions.length; index++) {
      var TotalSteps = this.RangeX / StepSizeOptions[index];
      if (TotalSteps <= labelonYaxis) {
        StepSizeY = StepSizeOptions[index];
        break;
      }
       this.SampleLayerContext.fillText(currentY, this.marginLeft / 2, (this.gridHeight + this.marginTop) 
 - y);

---

我不确定这是否是你等待的。但是你可以用你窗户的高度来计算h。如果你不等待一个全高的酒吧，用一个系数乘以H。示例：H*0.8//80%

要计算y轴，你需要知道横杆的高度，然后减去y基

pintGraph=功能（条）{
ctx.clearRect（0,0，W，H）；
barw=画布宽度/（条长）-边栏；
for（设i=0；i

查看我的项目以了解：

如果这有助于您检查是否正确或正确