flot 使用方法

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>