導語
ichartjs 是一個基於HTML5的圖庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形。 ichartjs致力於為您的應用程式提供簡單、直覺、可互動的體驗級圖表元件。是WEB/APP圖表展示方面的解決方案 。如果你正在開發HTML5的應用，ichartjs正好適合你。 ichartjs目前支援圓餅圖、環形圖、折線圖、面積圖、長條圖、長條圖。 ichartjs是基於Apache License 2.0協定的開源專案。
No1.一分鐘快速入門教學-Hello World
#千里之行，始於足下。我們先從Hello World開始。
首先引入js檔案
<script type="text/javascript" src="ichart.1.2.min.js"></script>
登入後複製
程式碼片段
//定义数据
$(function(){
var chart = new iChart.Column2D({
render : 'canvasp',//渲染的Dom目标,canvasp为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"}
}
}
}]
}登入後複製
運行結果
##至此，簡單的入門已經完成，但是不能僅限於此，拓展下思路，如果柱狀圖不僅僅是單色填充，而是各式各樣的圖形，或者俱有漸變效果的填充，該如何實現呢？
No2.自訂屬於自己的長條圖
先看看我想實現的效果
再有：
查閱了ichart官方的demo和文檔，未看到這方面的效果，只能自己動手，豐衣足食了。
首先實作一個相對簡單的，繪製各種字串。由於ichart底層是基於canvas的，只要拿到畫筆，想畫什麼畫什麼，想畫哪裡畫哪裡。
先執行上面的HelloWorld，單步
偵錯，找到最終繪製的入口。
doDraw:function(_){
if(_.get('actived')){
_.drawRectangle();
}
},登入後複製
這裡就是最終繪製的入口，可見原始碼中只要可以繪製矩形，好單一的感覺。
修改後的這個的入口：
doDraw:function(_){
if(_.get('actived')){
var _ = this._();
var type = _.options.type;
if(type === 'slash'){
_.drawSlash();
}else if(type === 'innerRect'){
_.drawInnerRect();
}else if(type === 'wire'){
_.drawWire();
}else if(type === 'star'){
_.drawStar();
}else if(type === 'exclamation'){
_.drawExclamation();
}else if(type ==='innerRectAndLine'){
_.drawInnerRectAndLine();
}else if(type === 'judge'){
_.drawJudge();
}else{
_.drawRectangle();
}
}
},登入後複製
預設仍然繪製矩形，但是根據傳入的類別，可以繪製圖形的圖形，如type===' exclamation'，程式會呼叫_.drawExclamation();方法，我們看看drawExclamation()方法的定義：
drawExclamation: function() {
var _ = this._();
var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get('border'), f_color=_.get('f_color'), shadow=_.get('shadow');
_.T.box(
_.get(_.X),
_.get(_.Y),
_.get(_.W),
_.get(_.H),
_.get('border'),
_.get('f_color'),
_.get('shadow'));
var character = _.options.character && _.options.character.value;
_.T.textStyle(_.L, 'middle', $.getFont(_.get('fontweight'), _.get('fontsize'), _.get('font')));
_.T.fillText(character, x + w/2 - _.T.measureText(character)/2, y+h/2, _.get('textwidth'), border.color);
},登入後複製
程式碼中顯示，先繪製矩形Box，其次繪製傳入的文字，這樣我們的貨幣匯率表就很容易實現了。
陰影圖形
drawSlash: function(){
var _ = this._();
var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get('border'), f_color=_.get('f_color'), shadow=_.get('shadow');
_.T.box(
_.get(_.X),
_.get(_.Y),
_.get(_.W),
_.get(_.H),
_.get('border'),
_.get('f_color'),
_.get('shadow'));
var difcount = 9;
var a = h/w, dx = parseInt(w/difcount), dy = dx * a;
for(var i = x + dx;i<= x+w; i+=dx){
var x0 = i - border.width,y0 = y + border.width;
var x1 = x + border.width, y1 = y + dy * (i-x)/dx - border.width;
_.T.line(x0,y0,x1,y1, border.width, border.color, false);
if(i !== x){
var x0 = i - border.width,y0 = y + h - border.width;
var x1 = x + w - border.width, y1 = y + dy * (i-x)/dx - border.width;
_.T.line(x0,y0,x1,y1, border.width, border.color, false);
}
}
},登入後複製
#效果圖：
其他形狀的圖示類似，不再陳述。多來看看一些效果圖：
以上是iChart-組件定製圖形庫圖表/報表開發教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
