jqueryflot图表x轴坐标过长完美解决方案

近段时间，项目中使用到了flot这个图表工具，在实际使用的过程中，遇到了一个看似很简单的问题：当坐标的刻度如果过长时，会重叠在一起，影响阅读：

看到这个效果后的第一反应就是，能不能让坐标斜着显示啊？去查阅flot的文档，竟然没有留斜着显示的接口。只有标签的宽度labelWidth和高度labelHeight的设置。不甘心，还是去网上海搜，在google code的flot专区找到了有人在问，也有回答的几个方案：

 

方案1：改源码

 

有一大神修改了flot的源码，加入了一个labelAngle用于控制标签的角度，并将具体的改动的过程贴了出来，我本来打算的是，按照改源码的思路去做，可能是因为使用的flot的版本不一致，大神贴出来的代码中有一部分代码我使用的版本里面没有，而我对js这块并不精通，也不想换flot为低版本的，于是乎放弃掉改源码这一思路。

 

方案2：在HTML中自己写css进行角度控制

 

在图表生成的HTML中，加入如下的css进行控制label的角度。

.tickLabel

{

 -o-transform:rotate(-60deg);

  -moz-transform:rotate(-60deg);

 -webkit-transform:rotate(-60deg);

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

 

于是，我按照此思路来了一试，不中，不管用啊。。。自己查找了一下，找到原因了，在flot的源码中有如下代码：

这里，flot是如果用户自己指定了font属性，则使用用户指定的font，如果没有指定，则将font的class设置为”flot-tick-label tickLabel”，而我之前自己指定过font，因此，在生成图表时，并不会有class=”flot-tick-label tickLabel”的元素，这也是为什么我加入css控制后不起作用的原因。于是，删掉自己定义的font，再看，在火狐浏览器里，完美。可是到IE浏览器里面看看，