ACharts是基于Raphael 庫開發的，而Raphael.js是基于svg和vml語言，因此最低可以兼容到IE6+,而最高則所有支持w3c svg標準的現代瀏覽器都可以使用，svg甚至在手機平臺也能有不錯的表現。本項目是由某淘寶大神開發，目測是淘寶某大神開發的后臺管理框架BUI中使用的圖表庫，功能完善，兼容性好，MIT協議，完全免費。。。 ACharts - javascript 圖形組件,全面的圖形庫，折線圖、柱狀圖、區域圖、餅圖以及各種其他類型圖形,易于使用,方便擴展。 使用教程 引入cdn上的代碼 <script src="http://g.tbcdn.cn/bui/acharts/1.0.15/acharts-min.js"></script> 使用,引入acharts文件后，會在window上增加Chart變量代表Chart控件類 var chart = new AChart({ //configs }); // use acharts 圖表的屬性 id 圖表渲染到的容器的id，必須 width 圖表的寬度，如果設置forceFit :true,則自動計算寬度 height 圖表的高度 data 圖表的數據，如果此屬性設置，series內部就不需要設置data forceFit 圖表寬度自適應，窗口發生改變時，圖表寬度自適應 fitRatio 如果設置了forceFit 那么寬高的比例由此屬性決定，默認0，不按照比例設置高度 plotCfg 圖表的邊框、背景設置，詳細信息參考：圖表背景，wiki title 圖表標題，設置null時不顯示，是一個文本圖形 subTitle 圖表子標題，設置null時不顯示，是一個文本圖形 xAxis x軸坐標，對應 Axis類，更多坐標軸文檔 type 標示坐標軸類型會轉換成對應的坐標軸，例如 Axis.Number 對應 type : 'number';Axis.Circle 對應 type : 'circle' 其他配置信息是指定類型坐標軸的配置信息 yAxis y軸坐標，配置信息類似于 xAxis,特別之處在于： yAxis可以是數組，標示圖表有多個y坐標軸，對應的圖表序列 series里面配置 yAxis:1，即可 yTickCounts y軸坐標軸的坐標點的個數，決定顯示的文本和柵格密度，這個值是一個數組類型，指定最小、最大個數，默認 ： [3,5] xTickCounts x軸坐標軸的坐標個數，也是有個數組 ，默認 [5,10] colors 顏色列表，多個圖表序列時，每個圖表序列的顏色依次自動賦值 tooltip 提示信息，詳細信息參考tooltip legend 圖例，詳細信息參考圖例 series 圖表序列的配置信息，是一個數組，每個對象代表一個圖表序列,詳細信息參考圖表序列,詳細文檔，更多圖表序列 type 標示圖表序列的類型，例如 type : 'line' 代表 Series.Line; type : 'column' 代表Series.Column 其他配置信息參考 對應的數據類型 seriesOptions 圖表序列統一的配置信息，多個同樣的圖表序列的配置信息可以一起配置 每種圖表一種配置信息，例如 lineCfg 標示折線圖 type : 'line' 的配置信息，columnCfg 標示柱狀圖的配置信息 如果僅有一種類型的配置信息，例如 seriesOptions : {columnCfg : {}}，默認所有series的類型為 column theme 圖表的皮膚，詳細信息參考圖表皮膚 canvas 畫布 方法 render() 渲染圖表 on(eventName,fn) 綁定事件 off(eventName,fn) 解除事件綁定 get(name) 獲取屬性 set(name,value) 設置屬性 getSeries() 返回所有的series getSeriesByName(name) 獲取指定名稱的series getXAxis(seriesName) 根據序列series的name返回對應的x坐標軸，如果不指定則取第一個序列的x坐標軸 getYAxis(seriesName) 根據序列series的name返回對應的y坐標軸，如果不指定則取第一個序列的y坐標軸 changeData(data) 更改數據，如果有多個序列則 data 是一個多維數組，data = [data1,data2...datan] 綁定事件 圖表的事件綁定方式有多種方式： 直接在chart上綁定圖表的事件，事件類型比較少，必須在圖表上觸發事件 配置項中配置對應元素的事件，例如可以在具體的某個 series里面配置series的事件 查找到對應的圖形或者分組，綁定事件 直接在圖表上綁定事件 圖表支持的事件類型： plotclick 圖表邊框內部的點擊事件 ev.x 點擊的x坐標 ev.y 點擊的y坐標 ev.shape 點擊的圖形 plotmove 圖表邊框內部的移動事件 ev.x 移動到的x坐標 ev.y 移動到的y坐標 ev.shape 移動到的圖形 plotover 進入圖表的邊框內部 ev.x 進入的x坐標 ev.y 進入的y坐標 ev.shape 移動到的圖形 plotout 移出圖表邊框 seriesactived 圖表序列激活，例如折線圖激活 ev.series 圖表序列 seriesunactived 圖表序列取消激活 ev.series 圖表序列 seriesitemclick 點擊圖表序列子項，例如餅圖的一個子項（弧形）被點擊 ev.series 圖表序列 ev.seriesItem 圖表序列子項 seriesitemselected 選中圖表序列的一個子項，例如柱狀圖的一項被選中 ev.series 圖表序列 ev.seriesItem 圖表序列子項 seriesitemunselected 取消選中圖表序列的一個子項 ev.series 圖表序列 ev.seriesItem 圖表序列子項 tooltipshow 提示信息顯示 tooltiphide 提示信息隱藏 綁定事件的代碼 chart.on('plotclick',function(ev){ var shape = ev.shape; if(shape){ //TO DO } }); ACharts案例大全 http://www.shouce.ren/api/view/a/11390 ACharts API文檔 http://acharts.github.io/acharts-api/api/index.html http://github.com/acharts/acharts 項目主頁 http://acharts.github.io/