标签：
近段时间，项目中使用到了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浏览器里面看看，
IE里面只有90度，这是怎么回事，原来IE并不支持transform，而IE使用的是MatrixFilter。这里旋转90度对应的是css中的如下的代码：
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
rotation的值 0代表0°，1代表顺时针90°，2代表顺时针180°，3代表顺时针270°4代表顺时针360°，以此类推。
此方案并不是十分完美，存在的问题和注意的事项如下：
1、在生成图表时，一定不要指定font属性，否则不能生效
2、最致命的问题在于，IE中的角度太固定，只有90°，不完美。
基于以上两种思路，我结合了一下，考虑出如下的一种，还算完美的思路：
3> css控制字体，jquery.rotate.js控制旋转角度
在生成图表时，不要指定font，而用css来控制字体样式：
.xAxis >.tickLabel
{
font-size: 10px;
margin-top: 20px;
}
字体控制好了，怎么旋转角度呢？去网上搜了一下，发现了一个jQueryRotate.js的插件，可用于控制dom元素旋转的插件。引入该插件后，可使用如下语法来控制：
$(".xAxis > .tickLabel").rotate(-45);
方法的参数即为要旋转的角度。
这种方法还算比较完美，在IE,火狐，chrome,opera等主流浏览器中均能完美运行。但有一个注意事项，生成图表时不能指定字体。
xaxis: {
mode:"categories",
reserveSpace:true,
labelWidth:55，
font:{}
}
红色的font不能要。
这是在IE下的效果，火狐，chrome这种就更不用说了，正常。
附上google code的flot的地址，大家有兴趣自己看以看看：
http://code.google.com/p/flot/issues/detail?id=85#c20
续：
其实flot功能很强大，完全可以自定义刻度，横坐标，纵坐标，均可以自定义刻度。如果因为坐标过长而重叠影响显示效果，完全可以使用自定义的短的字符串来进行代替显示。当然，这是在需求范围内，如果需求就是显示那种较长的字符串当标签，那只能将坐标的标签旋转一定角度了。
下面做一个自定义刻度的小例子。
假设，从后台传过来的数据，经过解析后，是如下的对象数组形式：
var odata =
[ {date:"2012-12-12",count:32},
{date:"2012-12-13",count:24},
{date:"2012-12-14",count:43},
{date:"2012-12-15",count:53},
{date:"2012-12-16",count:20}
];
加入flot.categories.js后，数据格式可以是这样的：
vardata = [ ["January", 10], ["February", 8],["March", 4], ["April", 13], ["May", 17],["June", 9] ]
但是如果标签过长，显示会有问题。
我们可以自定义刻度来解决这个问题。
先定义两个数组，一个用来存放数据data,一个用来存放标签label
vardata = [];
varlabel = [];
循环遍历解析后的对象数组，然后对应着将count和日期date存放到相应的数组：
for(vari=0;i<odata.length;i++){
data.push([i,odata[i].count]);
label.push([i,odata[i].date]);
}
然后我们在调用.plot()函数生成图表时，指定对应轴的刻度即可：
$.plot("#placeholder", [ {label:"5天内变化图",data:data} ], {
series:{
bars:{
show:true,
barWidth:0.6,
align:"center"
}
},
xaxis:{
mode:"categories",
ticks:label
},
grid:{
hoverable:true,
clickable:true
}
});
这时现实出来的图应该是：
我们在写鼠标点击事件时，可以通过以下代码取到相应的值：
//item.datapoint[0]取的是x坐标值
//item.datapoint[1]取的是y坐标值的顶部值（）
//item.datapoint[2]取的是y坐标值的底部值（这个貌似只有柱状图有，折线图等没有，因为可能涉及到堆栈图）
var x=item.datapoint[0],
yh=item.datapoint[1],
yb=item.datapoint[2];
//item.series.label是指传入数据时传入的label，这里是 "5天内变化图"
//item.series.xaxis.ticks[item.datapoint[0]].label取的是图里x坐标轴上的标签（不是x坐标值）
//item.series.xaxis.ticks[item.datapoint[0]]是一个Object类型，具体的是{v:1,label:"2012-12-12"}这中格式的Object
label = item.series.label+":"+
item.series.xaxis.ticks[item.datapoint[0]].label;
showTooltip(item.pageX,item.pageY,label + " 新增数量： " + (yh-yb)+"-----"+x);
以上一小段程序展示了如何从图表中取得相应的数据，取得x坐标值后，因为数据数组和标签数组是对应的，所以也能取得相应的label，然后就可以从后台进行数据查询了。
转自http://m.blog.csdn.net/blog/coolcaosj/17588557
标签：
原文地址：http://www.cnblogs.com/ly-radiata/p/4866352.html
