flot 的使用要點如下 : (以嵌入 myASP 為例)
1. 首先把解開的 flot 目錄複製到 myASP 的 plug-in 目錄下 : /plug-in/flot
(flot 下面的examples 子目錄可以不用複製)
2. 在網頁中貼入下列碼 :
其中前面有三個 javascript 必須外部載入, 調整 src 屬性值以便能正確連結 script 檔
此處因 myASP 系統各程式均是在根目錄 admin.asp 高度下運作, 因此 src 都加上 plug-in/flot
第四行 <div> 就是繪圖區, flot 利用操控 div 產生畫板來繪圖.
最後一個 script 為內嵌型, 依據所要的繪圖格式, 可由後台 asp 程式產生所需要的資料.
<!--[if IE]><script language="javascript" type="text/javascript" src="plug-in/flot/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="plug-in/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="plug-in/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:400px;height:200px"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1=[];
for (var i = 0; i < 14; i += 0.5) {d1.push([i,Math.sin(i)]);}
var d2=[[0, 3],[4, 8],[8, 5],[9, 13]];
var d3=[];
for (var i = 0; i < 14; i += 0.5) {d3.push([i,Math.cos(i)]);}
var d4=[];
for (var i = 0; i < 14; i += 0.5) {d4.push([i,Math.sqrt(i * 10)]);}
var d5=[];
for (var i = 0; i < 14; i += 0.5) {d5.push([i,Math.sqrt(i)]);}
$.plot($("#placeholder"),[
{
data:d1,
lines:{show:true,fill:true}
},
{
data:d2,
bars:{show:true}
},
{
data: d3,
points: { show: true }
},
{
data: d4,
lines: { show: true }
},
{
data: d5,
lines: { show: true },
points: { show: true }
}
]); //end of plot
}); //end of function
</script>
沒有留言:
張貼留言