Javascript 如何在画布上绘制图表，其中的条形图具有画布的高度？_Javascript_Canvas_Charts_Html5 Canvas_Height

Javascript 如何在画布上绘制图表，其中的条形图具有画布的高度？

javascript canvas charts html5-canvas

Javascript 如何在画布上绘制图表，其中的条形图具有画布的高度？,javascript,canvas,charts,html5-canvas,height,Javascript,Canvas,Charts,Html5 Canvas,Height,我必须用vanilla JS在画布上制作一个酒吧，没有charts.JS或jquery。对于画布大小来说，条太长，因此它不会显示条的全长。如何缩放栏，使其适合硬编码的画布高度提前谢谢 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>chart</title> </head>

我必须用vanilla 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>


图表




画布{
边框：1px纯黑；
}
window.onload=函数canvas（）{
让canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
让数据=['A'，439]，'B'，228.23]，'C'，2580.39]，'D'，279]；
设棒宽=50；
设ygap=30；
设bargap=100；
设x=50；
y=画布高度-ygap；
canvas.width=data.length*（bargap）+x；
ctx.moveTo（x-5，y）；
ctx.lineTo（canvas.width，y）；//图形的基线
ctx.stroke（）；
for（设i=0；i

这是如何获得

画布的高度的方法：
document.getElementById（'canvas'）。高度
这是最下面点的坐标。画布顶部的坐标为0。此函数
计算给定百分比的坐标：
function percent(input, canvasHeight) {
    return canvasHeight - (canvasHeight * input / 100);
}

这就是如何获得画布的高度的方法：
document.getElementById（'canvas'）。高度
这是最下面点的坐标。画布顶部的坐标为0。此函数
计算给定百分比的坐标：
function percent(input, canvasHeight) {
    return canvasHeight - (canvasHeight * input / 100);
}

感谢您的回答，我必须在哪些行上使用此函数才能缩放？@TimmyJohnson percent（75，canvas.height）将被计算出来，以找出条形图的左上角点（本例中假设为75%），条形图的高度将为canvas.height-（canvas.height*75/100）。感谢您的回答，我必须在哪些行上使用此函数才能缩放？@TimmyJohnson percent（75，canvas.height）将被计算出来，以找出您的条的左上角点（本例中假设为75%），条的高度将为canvas.height-（canvas.height*75/100）。