利用svg及JavaScript做柱状图

使用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%;left:3%;height:50%;width:50%} #title{font-size:25px;text-align:center;margin-bottom:0} #bars{position:absolute;bottom:0;height:88%;width:100%} #ticks{position:absolute;left:13%;bottom:0} .date{float:left;margin:0px 25px;bottom:0;font-size:30px} svg{display:block;margin-top:36.1%} #ave>svg{background:blue} #peak>svg{background:red} .avemarks{position:absolute;left:20.1%;margin:0 0;height:100%;top:-20%;} #avemarks{-webkit-transform:rotate(90deg);margin:480% 0