Как сделать диаграмму на холсте со столбиками, у которых столбцы имеют высоту холста? - PullRequest
Новая
       23

Как сделать диаграмму на холсте со столбиками, у которых столбцы имеют высоту холста?

1 голос
/ 28 октября 2019

Я должен сделать бар в холсте с ванильным 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 Ответ

0 голосов
/ 28 октября 2019

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

document.getElementById ('canvas'). Height

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

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