Я должен сделать бар на холсте с ванильным JS, без charts.js или jquery. Полосы слишком длинные для размера холста, поэтому они не показывают полную длину полос. Как я могу масштабировать столбцы так, чтобы они соответствовали жестко заданной высоте холста?

Заранее спасибо!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>chart</title>
  </head>
  <body>
    <br>
    <br>
    <canvas id="canvas" width="400" height="400"></canvas>


<style> canvas { 
  border: 1px solid black; 
}
</style>

<script>

window.onload = function canvas() {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let data = [['A', 439], ['B', 228.23], ['C', 2580.39], ['D', 279]];
  let barwidth = 50;
  let ygap = 30; 
  let bargap = 100; 
  let x = 50;

  y = canvas.height - ygap;

  canvas.width = data.length * (bargap) + x;

  ctx.moveTo(x - 5, y);
  ctx.lineTo(canvas.width, y); // Base line of graph 
  ctx.stroke();

  for (let i = 0; i < data.length; i++) {
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillStyle = 'black';
    ctx.fillText(data[i][0], x, y + 5); // Write base text for classes 

    ctx.beginPath();
    ctx.lineWidth = 2;
    y1 = y - data[i][1]; // Coordinate for top of the Bar 
    x1 = x;
    ctx.fillStyle = 'black';
    ctx.fillText(data[i][1], x1, y1 - 20); // text at top of the bar 

    ctx.fillStyle = 'black'; // fill Colur of bar  
    ctx.fillRect(x1, y1, barwidth, data[i][1]);// Filled bar

    x += bargap
  }
}
</script>

</body>
</html>
1
Timmy Johnson

1 ответ

Вот как вы можете получить height canvas :

document.getElementById ( ' холст ') . Высота

таким образом, это будет координата самых нижних точек. Вершина холста будет иметь координату 0. Эта функция вычисляет координату заданного процента:

function percent(input, canvasHeight) {
    return canvasHeight - (canvasHeight * input / 100);
}
58584113