介紹一個!非常簡單非常方便!制作圖表報表的js庫 —— ichartjs 【詳細操作】


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

下載地址 ichart官網

(注:轉載請注明來源)

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM