Question

取决于值，我们需要绘制如下所示的条形图。你有什么建议？画布，svg或一些图表工具？

enter image description here

Answer 1

为什么不使用普通的旧<div>元素？您可以使用CSS宽度作为百分比来设置条的长度，使用固定大小的父元素，这应该为您提供所需的内容。示例如下，根据需要重新设置：

<html>
    <head>
        <style>
            div{
                border: 1px solid black;
            }
        </style>        
    </head>
    <body>
        <div style="width: 200px; height: 20px;">
            <div style="width: 30%; height: 18px; background-color: red"></div>
        </div>
    </body>
</html>

绘制条形图的建议如下所示

1 个答案: