繪製你的第一個圖表(jquery-flot-line-chart)

標籤：地方   www   margin   準備   page   學習   基本   class   自動   

今天想做一個統計圖表，像163部落格的流量統計一樣的，藉助 flot 實現了，而且很簡單。

flot網址：http://code.google.com/p/flot/下載 JS 檔案，使用方法和 jquery 一樣。 注意：flot是自動繪製在畫布標籤（canvas）內的，IE不支援，需要添加 excanvas.min.js ，此檔案可以在上面給出的flot網址中下載 樣本網址：http://people.iola.dk/olau/flot/examples/參數說明：http://wenku.baidu.com/view/d504613331126edb6f1a1008.html上面的兩個網址已經將基礎說的很清楚了。 樣本說明：文法： $.plot(id, data, options);1.id :放置 canvas 的 div 的ID2.data :資料，一般為二維數組的形式。例如：[[x1,y1],[x2,y2],[x3,y3] , ...]如果某個資料為空白，則對應點將被忽略，且改點前後兩個點將不再用直線串連。3.options :樣式，用於設定顯示樣式。 options 的格式：

var options = {
	lines: { show: true },
	points: { show: true },
	xaxis: { tickDecimals: 0, tickSize: 1 }
	};

參數: 1.lines { }  顯示直線 show: true 顯示    color： "#FFFFFF" 線條顏色   steps: true 階梯形 2.points { }  顯示點3.bars { } 顯示長條圖4.xaxis { } 橫座標的樣式  例一：http://people.iola.dk/olau/flot/examples/basic.html文法樣本：$.plot($("#name"), [ d1,d2,d3 ]);
參數①：name 為畫布所在 div 的 id 。參數②：d2，d3 一般為數列數組 [x,y]，x和y分別表示每個點的橫軸和縱軸，例如可以定義如下：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 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];flot會依據其最大值和畫布大小自動化佈建刻度，例如設定div如下  <div id="placeholder" style="width:100px;height:100px;"></div> 則x方向每個像素表示 9/100=0.09 個單位，y方向每個像素表示 12/100=0.12 個單位。 例二：http://people.iola.dk/olau/flot/examples/graph-types.html文法樣本： 

    $.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 }        },        {            data: d6,            lines: { show: true, steps: true }        }    ]);

參數說明：lins 表示直線，參數 steps:true 表示梯形圖，bars 表示長條圖，points 表示點狀圖。與樣本一比較，執行個體二將樣本一中的資料用花括弧括起，此時需要用 "data:" 指定資料來源，逗號之後指定其顯示樣式。  例三：指定刻度顯示的內容用法執行個體：

    $.plot($("#placeholder"), [{ label: "", data: vData}],    {        series: { lines: { show: true }, points: { show: true} },        xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 },  //指定固定的顯示內容        yaxis: { ticks: 5, min: 0 }  //在y軸方向顯示5個刻度，此時顯示內容由 flot 根據所給的資料自動判斷    }        );

其中 vData 為自訂資料var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11, 155], [12, 155]];         顯示效果為：關鍵參數為 ticks 。可以看到本例中 x軸刻度的顯示內容是自己指定的，y軸讓 flot 自動劃分，當然也可以指定y軸。

繪製你的第一個圖表(jquery-flot-line-chart)