近段時間，項目中使用到了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