导语

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 : '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"}
                    }
                }
            }]
        }          

运转结果

至此，简朴的入门已完成，然则不能仅限于此，拓展下思绪，假如柱状图不仅仅是单色添补，而是形形色色的图形，或许具有渐变结果的添补，该怎样完成呢？

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

结果图：

其他外形的图标相似，不再陈说。多看看一些结果图吧：