1.構建項目環境
由於ichartjs是一個js庫，所以只要將ichart.js加入你頁面的head中就完成了ichartjs的運行環境。代碼如下：
<script type="text/javascript" src="ichart.1.2.min.js"></script>
2.例子說明
我們利用2D柱形圖來展示Hello World的各個字母在字母表中的位置的情況。我們將位置抽象為其高度。來以我們的方式來展示一個不一樣的Hello World。
3.預覽
我們先來看下例子最后的預覽圖，以便使你讀起來沒有那么乏味。如下圖：
4.代碼說明
//定義數據
var data = [ {name : 'H',value : 7,color:'#a5c2d5'}, {name : 'E',value : 5,color:'#cbab4f'}, {name : 'L',value : 12,color:'#76a871'}, {name : 'L',value : 12,color:'#76a871'}, {name : 'O',value : 15,color:'#a56f8f'}, {name : 'W',value : 13,color:'#c12c44'}, {name : 'O',value : 15,color:'#a56f8f'}, {name : 'R',value : 18,color:'#9f7961'}, {name : 'L',value : 12,color:'#76a871'}, {name : 'D',value : 4,color:'#6f83a5'} ]; $(function(){ var chart = new iChart.Column2D({ render : 'canvasDiv',//渲染的Dom目標,canvasDiv為Dom的ID data: data,//綁定數據 title : 'Hello World\'s Height In Alphabet',//設置標題 width : 800,//設置寬度，默認單位為px height : 400,//設置高度，默認單位為px shadow:true,//激活陰影 shadow_color:'#c7c7c7',//設置陰影顏色 coordinate:{//配置自定義坐標軸 scale:[{//配置自定義值軸 position:'left',//配置左值軸 start_scale:0,//設置開始刻度為0 end_scale:26,//設置結束刻度為26 scale_space:2,//設置刻度間距 listeners:{//配置事件 parseText:function(t,x,y){//設置解析值軸文本 return {text:t+" cm"} } } }] } }); //調用繪圖方法開始繪圖 chart.draw(); }); //Html代碼 <div id='canvasDiv'></div>
5.結束語
本教程作為快速入門的向導，在本文檔中所用到的配置屬性，並不是圖表中的全部屬性，要配合ichartjs API進行閱讀可以達到事半功倍的效果。閱讀完本教程可以基本掌握ichartjs的大致功能以及使用方式，要想達到隨心所欲的境界還是要多多進行實例練習，組件中提供了大量的實例是學習ichartjs好的途徑。