首頁 > 開發者 > JavaScript
參考這一篇http://www.cnblogs.com/chengxs/p/7857233.html
一、基礎柱狀圖
二、基礎的折線圖
三、基礎的餅圖
四、基礎的散佈圖
一、基礎柱狀圖
如果你還沒有想好你的資料用什麼類型的圖表來展示你的資料，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示資料的變化過程或者表示多個資料之間的差異。
1、引入javascrippt
使用flotr2這個JavaScript庫來建立圖表。使用flotr2之前，不需要引入其他的JavaScript庫（比如jquery），但是flotr2必須依賴HTML5的canvas元素的支援。canvas支援的主流瀏覽器有：chrome，Safari，firefox，以及IE9以上。如果非要支援到IE8，可以再引入一個額外的庫excanvas.min.js
首先看一下html代碼
2、建立一個包含圖表容器的div元素
建立一個div來包裹這個圖表，要求這個div元素必須指定他的寬和高，圖表才能建立起來。下面例子採用的是內聯的方法指定div的css樣式。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="chart" style="width: 600px;height: 300px;"></div> <script src="js/flotr2.js"></script> </body></html>
上面就是一個簡單的代碼架構。
3、定義資料
有了代碼架構，就應該考慮如何顯示資料。
顯示資料：1、可以是本地的資料；2、可以是ajax請求擷取的資料
建立三維數組
<script> var win = [ [ [2006, 13], [2007, 11], [2008, 15], [2009, 15], [2010, 18], [2011, 21], [2012, 28] ] ]; </script>
[x,y]中，x表示年，y表示獲勝的場次。我們把若干個x，y組合使用一個外層數組進行嵌套，這個嵌套的數組是序列。我們在這個序列外邊又嵌套一個外層數組，以便我們將來可以儲存多個序列。
注意：（1）數組的第一層：每一個獨立的資料自身是一個數組，包含x，y。
（2）數組的第二層：若干個獨立的資料在一起構成一個數組，成為序列。
（3）組的第三層：若干個序列構成flotr2渲染圖表使用的完整的資料，形式也是數組。
4、繪製圖表
簡單的繪製一個圖表，調用flotr2庫。
window.onload = function() { Flotr.draw( document.getElementById("chart"), wins, { bars: { show: true } } ); };
代碼中，window.onload這個函數，在我們需要把文檔載入完成之後調用，window.onload事件觸發後，我們執行flotr.draw這個函數，並傳3個參數給它，這三個參數包括：圖表的html元素本身，剛才定義的圖表資料，一些可配置的圖表選項。
如果你的頁面有jquery，可以使用jq方法來改寫這代碼。
5、改進縱座標
上圖有問題：
（1）縱軸的刻度。flotr2預設將資料中的最大值和最小值自動化佈建為座標的取值範圍。2007年對應的是11，但是給人感覺就是0，這種情況需要避免。
（2）縱軸的格式。flotr2預設將精確到小數點後一位，在標註中或多帶一個多餘的“.0”。
Flotr.draw( document.getElementById("chart"), wins, { bars: { show: true, }, yaxis:{ min:0, tickDecimals:0, } } );
注意：flotr2區分大小寫。
flotr.draw函數通過min屬性設定縱軸的最小值；
通過ticketDecimals屬性告訴標註展示的小數精度。我們不想要小數，設定成0。
簡單進行圖表選項的配置。解決了縱軸最小值問題和刻度格式問題。
6、改進橫軸
同時還會出現2個問題，（1）橫軸也會出現標註也被預設為擁有1位小數的數字;（2）橫軸兩個柱體之間缺乏間距。
先解決第一個問題：橫軸資料的單位是年，我們可以使用縱軸的方式通過tickDecimals屬性，設定成0，但是這種做法並不是通用。如果橫軸不是數字類型（比如隊名），這種解決方案就是解決不了。為了適用更普遍的情況
我們首先改變一下資料結構，建立一個新的數組years，在這個數組中，每一個年份有一個索引數字配對。同時修改之前的wins數組，將原來的年份使用對應的索引數字替代，這樣這兩個數組建立了查詢關係。
var wins = [ [ [0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28] ] ]; var years = [[0,"2006"],[1,"2007"],[2,"2008"],[3,"2009"],[4,"2010"],[5,"2011"],[6,"2012"]];
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
