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

Question

我有一个项目需要在网站中插入条形图。我不能使用图表的图像。有没有其他方法来绘制这个？某种方式我可以在中间绘制它并对其下面的图形进行解释。

Answer 1

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

    <div style="height: 690px; width:1000px; background:black;">
        <div style="height: 100px; margin-top:175px; width:100px; background:red;" /><br/>
        <div style="height: 100px; margin-top:175px; width:300px; background:green;" /><br/>
        <div style="height: 100px; margin-top:175px; width:703px; background:yellow;" /><br/>
        <div style="height: 100px; margin-top:175px; width:968px; background:blue;" /><br/>
    </div>

这很粗糙，但可以快速破解。

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

Answer 2

有许多用于绘制图表的JavaScript库。例如，您可以尝试chartjs，或阅读提供50 libraries for charts and graphs列表的文章。