利用svg及JavaScript做柱状图

最新推荐文章于 2025-05-28 13:04:52 发布

zhan006

最新推荐文章于 2025-05-28 13:04:52 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： html css svg javascript

本文链接：https://blog.youkuaiyun.com/zhan006/article/details/84774421

本文介绍了一种利用SVG和JavaScript制作柱状图的方法。通过将SVG容器逆时针旋转90度来解决水平柱状图的问题，然后通过CSS调整定位，实现了柱状图的布局。内容包括HTML结构、CSS样式以及JavaScript读取JSON数据并生成柱状图的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用SVG最头痛的一点就是其宽度和高度是从左上到右下的方向增加的，这意味如果我们需要一个水平排列的柱状图即柱状图底部处于同一y轴操作起来会很麻烦。网上也有不少方法但是多数也是看的一头雾水，然而突然灵光一闪，如果我将整个承载svg的框架逆时针旋转90度那问题不久都迎刃而解了？试了一下效果挺理想，唯一的缺点就是在设计css的时候需要把头也拧90度。
下面上html代码

<div id="barchart">
<p id="title">Peak And Average Timecost</p>
<div id="bars">
<div id="ave">
<div class="avemarks">

</div>

</div>
<div id="peak">
<div class="peakmarks">

</div>

</div>
<div id="ticks">
<p class="date">Mon</p>
<p class="date">Tue</p>
<p class="date">Wed</p>
<p class="date">Thu</p>
<p class="date">Fri</p>
<p class="date">Sat</p>
<p class="date">Sun</p>
</div>
</div>

</div>

这是一个统计一周内北京某路段交通路程的平均时间的项目，用到了百度地图api以及python的数据处理，这里就不上代码了。总之数据都储存在了一个json文件里面，在JavaScript中使用ajax获取json的数据并进行使用，这个在后面的js代码里面会有
接下来是css代码#barchart{position:absolute;margin:auto;top:50%;lef