首页html+js水平柱状图

html+js水平柱状图

时间: 2023-10-13 12:08:04 浏览: 30

您可以借助 HTML5 canvas 和 JavaScript 来实现水平柱状图。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Horizontal Bar Chart</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="400" height="200"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const data = [20, 50, 30, 80]; const barHeight = 30; const barGap = 10; const barColor = '#008080'; let currentX = 0; for (let i = 0; i < data.length; i++) { const barWidth = data[i] * 2; ctx.fillStyle = barColor; ctx.fillRect(currentX, i * (barHeight + barGap), barWidth, barHeight); currentX += barWidth; } </script> </body> </html> ``` 在这个示例中，我们使用 canvas 元素创建了一个画布，并使用 JavaScript 绘制了水平柱状图。我们设置了 barHeight（柱子高度）、barGap（柱子之间的间距）和 barColor（柱子颜色）三个变量，然后遍历 data 数组，根据数组中的元素绘制柱子。