ichartjs是一個國產的圖表庫,提供各種api,以及多種樣式的圖表
圖表包括:面積圖、2d條形圖、2d柱狀圖、3d柱狀圖、折線圖、餅狀圖等,並且可以組合圖形。
ichart是一個輕量級的js組件,快速構建圖表並可跨平台使用
這是ichart的案例展示圖,在這個頁面我們通過點擊view code 查看當前圖表調用api的方法
ichart官網api的說明使用的參考文檔
一個簡單的例子熟悉一下ichart.js
1.通過官網我們去下載一個最新版本的ichart(文章最后有鏈接)
2.在解壓的根目錄我們可以看到一個ichart.1.2.min.js,這個就是ichart的全部代碼(帶了.min是一個壓縮的版本)
3.創建一個文件夾,把ichart.1.2.min.js歸放到js文件夾里面
4.新建一個html文檔,在<head>之間引入jQuery 和 ichart.1.2.min.js(沒有jQuery的請自己在網上找一個,當然你下載的ichart壓縮包里面包含了,請自己找)
5.在頁面創建一個div並指定一個id='canvasDiv'
6.輸入如下代碼(用<script>包含),一個完美的2d條形圖就搞定了!!!
1 function Bar2D(){ 2 var data = [ 3 {name : 'Kamile Jureviciute' ,value :80 ,color:'#006CFF'},{name : 'Donald Sue' ,value :33 ,color:'#FF6600'},{name : 'Connie Vuong' ,value :173 ,color:'#34A038'},{name : 'Karen Zanger' ,value :75 ,color:'#945D59'}, ]; 4 5 new iChart.Bar2D({ 6 render : 'canvasDiv', //指定繪制到的id 7 data: data, //圖表的數據 8 title : "Number of Patient Visit", //圖表的標題 9 animation:true, //是否顯示動畫,默認為false 10 decimalsnum:2, //百分點精確到2位 11 width : 900, //寬度 12 height : 400, //高度 13 align : 'left', //對齊方式,默認為center 14 padding : 15, //填充 15 border: 'none', //邊框,默認為true
//鼠標交互的tip提示 16 tip:{ 17 enable:true, 18 listeners:{ 19 //tip:提示框對象、name:數據名稱、value:數據值、text:當前文本、i:數據點的索引 20 parseText:function(tip,name,value,text,i){ 21 return "詳細信息: <br />"+value+"k"; 22 } 23 } 24 }, 25 26 27 }).draw(); 28 } 29 30 Bar2D();
7.說明
你可以在解壓后的文件夾src里面找到對應單一的圖表js,這樣只需要加載所用到的圖表的js組件(minify文件夾為壓縮版)
你可以通過 參考文檔 查閱更多的api
(注:轉載請注明來源)