没有库的 HTML CANVAS 5 中的水平条形图

如何解决没有库的 HTML CANVAS 5 中的水平条形图

我正在尝试制作具有动态宽度的动态水平条形图，当我更改画布宽度和高度时，它会相应地调整水平条的位置。（Canvas 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);

无法找到在yaxis公式上找到水平条动态高度和位置的解决方案 到目前为止我做的公式

    var barWidth = this.data.length / this.gridWidth;
    var pixel = (this.gridWidth / this.RangeX);
    this.SampleLayerContext.rect(this.marginLeft,this.gridHeight-Yaxis,Yaxis,barWidth);

解决方法

我不确定这是否是您所等待的。但是您可以使用窗口的高度计算 h。如果您不等待全高的条形，请使用因子乘以 H。示例：H*0.8 //80%。

要计算 y 轴，您需要知道条的高度并减去 y 基数。

pintGraph = function( bars ){
  ctx.clearRect(0,W,H);  
  barw = canvas.width / (bars.length) - marginbar;
  
  for(let i = 0; i < bars.length; i++){
    ctx.fillStyle = color[i];
    barh =  H * (bars[i]/max);
  
    ctx.fillRect( i * (barw + marginbar),Hbase - barh,barw,barh);
    
  }
}

看看我的项目就明白了：https://codepen.io/Luis4raujo/full/ZEBaVbJ

如果这有助于您检查正确或投票。