導(dǎo)語(yǔ)

ichartjs 是一款基于HTML5的圖形庫(kù)。使用純javascript語(yǔ)言, 利用HTML5的canvas標(biāo)簽繪制各式圖形。 ichartjs致力于為您的應(yīng)用提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件。是WEB/APP圖表展示方面的解決方案 。如果你正在開(kāi)發(fā)HTML5的應(yīng)用，ichartjs正好適合您。 ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0協(xié)議的開(kāi)源項(xiàng)目。

No1.一分鐘快速入門(mén)教程-Hello World

千里之行，始于足下。我們先從Hello World開(kāi)始。

首先引入js文件

<script type="text/javascript" src="ichart.1.2.min.js"></script>

代碼片段

//定義數(shù)據(jù)  $(function(){                 var chart = new iChart.Column2D({              render : 'canvasp',//渲染的Dom目標(biāo),canvasp為Dom的ID              data: data,//綁定數(shù)據(jù)              title : 'Hello World's Height In Alphabet',//設(shè)置標(biāo)題              width : 800,//設(shè)置寬度，默認(rèn)單位為px              height : 400,//設(shè)置高度，默認(rèn)單位為px              shadow:true,//激活陰影              shadow_color:'#c7c7c7',//設(shè)置陰影顏色              coordinate:{//配置自定義坐標(biāo)軸              scale:[{//配置自定義值軸                  position:'left',//配置左值軸                   start_scale:0,//設(shè)置開(kāi)始刻度為0                  end_scale:26,//設(shè)置結(jié)束刻度為26                  scale_space:2,//設(shè)置刻度間距                  listeners:{//配置事件                      parseText:function(t,x,y){//設(shè)置解析值軸文本                          return {text:t+" cm"}                      }                  }              }]          }

運(yùn)行結(jié)果

至此，簡(jiǎn)單的入門(mén)已經(jīng)完成，但是不能僅限于此，拓展下思路，如果柱狀圖不僅僅是單色填充，而是各式各樣的圖形，或者具有漸變效果的填充，該如何實(shí)現(xiàn)呢？

No2.定制屬于自己的柱狀圖

首先看看我想實(shí)現(xiàn)的效果

再有：

查閱了ichart官方的demo和文檔，未看到這方面的效果，只能自己動(dòng)手，豐衣足食了。

字符串圖形

首先實(shí)現(xiàn)一個(gè)相對(duì)簡(jiǎn)單的，繪制各種字符串。由于ichart底層是基于canvas的，所以只要拿到畫(huà)筆，想畫(huà)什么畫(huà)什么，想畫(huà)哪里畫(huà)哪里。

首先運(yùn)行上面的HelloWorld，單步調(diào)試，找到最終繪制的入口。

doDraw:function(_){      if(_.get('actived')){          _.drawRectangle();      }  },

這里就是最終繪制的入口，可見(jiàn)源碼中僅僅可以繪制矩形，好單一的感覺(jué)。

修改后的這個(gè)的入口：

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();        }      }    },

默認(rèn)依然繪制矩形，但是根據(jù)傳入的類(lèi)別，可以繪制圖形的圖形，如type==='exclamation'，程序會(huì)調(diào)用_.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，其次繪制傳入的文字，這樣我們的貨幣匯率表就很容易實(shí)現(xiàn)了。

陰影圖形

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);        }      }    },

效果圖：

其他形狀的圖標(biāo)類(lèi)似，不再陳述。多看看一些效果圖吧：