html - 如何使用html和css绘制图形？

Question

我有一个元素需要在网站中插入条形图。我不能使用图表的图像。还有其他方法可以画这个吗？我可以通过某种方式在中间绘制它并对其下方的图表进行解释。

Answer 1

如果您不想使用 HTML 5 Canvas ，您可以尝试使用具有不同颜色背景的 DIV 元素。

<div style="height: 150px; width:100px; background:black;">
  <div style="height: 10px; margin-top:17px; width:10px; background:red;" /><br/>
  <div style="height: 10px; margin-top:17px; width:30px; background:green;" /><br/>
  <div style="height: 10px; margin-top:17px; width:70px; background:yellow;" /><br/>
  <div style="height: 10px; margin-top:17px; width:96px; background:blue;" /><br/>
</div>

它很粗糙，但可以有效地快速破解。

您可以使用 CSS 设置图表中的所有静态值，然后使用 Style 标签更改条形的长度。