它提供了非常多地圖表範例─近16種左右。而且程式碼也不會很難懂；當然，如果只看過一個範例的程式碼，很難一窺全貌它到底在表達什麼，甚至是它的一些簡單架構。倘若閒暇之餘，每種圖檔都拿來練習一下，就不難發現它的一些潛規則。
Flot Chart總共需要用到以下的JavaScript Library (Framework):
01. jquery-1.8.3.min.js - 一定要用它們所建議的1.8.3的版本；自己之前用2.0.0的版本，結果在MSIE下完全不行。
02. excanvas.min.js - Canvas的Library建議也要包含；因為在某些MSIE8，或是MSIE9的版本會有問題。
03. jquery.flot.min.js
04. jquery.flot.symbol.js
05. jquery.flot.axislabels.js
06. jquery.flot.time.js
07. jshashtable-2.1.js
08. jquery.numberformatter-1.2.3.min.js
09. jquery.flot.stack.js - 如果是堆疊圖系列 (堆疊直條圖、堆疊橫條圖)，要用到這一個Library (因為資料的數值是累加上去的)。
10. jquery.flot.pie.js - 如果是圓餅圖、傾斜圓餅圖和甜甜圈圖，記得要包含這一個Library。
再來它的程式架構不外乎就是：
var dataX = [[a, b], [c, d], [e, f], ....];使用者所要呈現的資料，都用二維陣列來表示。
var dataset = [
{
lable:
data:
color:
bars: { // 條狀圖 (直條圖、橫條圖)需要用到此一系列的參數
show:
align:
barWidth:
lineWidth:
},
// 折線圖系列需要用到points和lines這兩個參數
points: {
symbol:
fillColor:
show: true
},
lines: {
show:
}
....
}
];
dataset故名思義，就是關於資料所要呈現的方式。options = {
seiers: { },
bars: { },
xaxis: { },
yaxis: { },
legend: {},
grid: {}
};
options選項則是指關於圖表選項的相關設定。再來就是程式碼的部份：
<script type="text/javascript" language="JavaScript">
// To do something....
</script>
<body>
<div id="...."></div>
</body>
<script type="text/javascript" language="JavaScript">
$(window.document).ready(function () {
// To do something....
return;
});
</script>
ready()函式記得一定要放在<body>標籤結束之後，因為ready()函式指的是「當網頁上所有的DOM元素都載入後所要做的動作」；如果放在<body>之前，DOM尚未載入完成就執行ready()在MSIE上會有問題。再來，就是$.fn.UseTooltip()和showTooltip()這兩個function，指的是當滑鼠游標移至該筆資料節點 (或是區域)時，所要呈現小標籤的樣式和資料。
最後，以自己的經驗而言，盡可能地使用它們所提供的範例來使用 (它們提供的範例算蠻多的)；倘若要自己生一個非範例所提供的樣式，除非很懂得他們的Library在寫些什麼，要不然會很不易Debug。
沒有留言:
張貼留言