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

【问题标题】：Horizontal Bar Graph in HTML CANVAS 5 without library没有库的 HTML CANVAS 5 中的水平条形图
【发布时间】：2021-02-23 18:54:51
【问题描述】：

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

【问题讨论】：

标签： typescript canvas graph html5-canvas bar-chart

【解决方案1】：

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

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

pintGraph = function( bars ){
  ctx.clearRect(0,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

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

【讨论】：