iChart--组件定制

   <h3>导语</h3>    <p>ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。</p>    <h2>No1.一分钟快速入门教程-Hello World</h2>    <p>千里之行，始于足下。我们先从Hello World开始。</p>    <p>首先引入js文件</p>    <pre>  <script type="text/javascript" src="ichart.1.2.min.js"></script></pre>    <p>代码片段</p>    <pre>  //定义数据  $(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"}                      }                  }              }]          }</pre>    <p>运行结果</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bfd688bd6f1547429b39dcab018108a6.png"></p>    <p>至此，简单的入门已经完成，但是不能仅限于此，拓展下思路，如果柱状图不仅仅是单色填充，而是各式各样的图形，或者具有渐变效果的填充，该如何实现呢？</p>    <h2>No2.定制属于自己的柱状图</h2>    <p>首先看看我想实现的效果</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1d7afb925163dadea2f9e845b3a9733d.png"></p>    <p>再有：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ad9332faf1b5be8a6875beb21baada13.png"></p>    <p>查阅了ichart官方的demo和文档，未看到这方面的效果，只能自己动手，丰衣足食了。</p>    <h3>字符串图形</h3>    <p>首先实现一个相对简单的，绘制各种字符串。由于ichart底层是基于canvas的，所以只要拿到画笔，想画什么画什么，想画哪里画哪里。</p>    <p>首先运行上面的HelloWorld，单步调试，找到最终绘制的入口。</p>    <pre>  doDraw:function(_){      if(_.get('actived')){          _.drawRectangle();      }  },</pre>    <p>这里就是最终绘制的入口，可见源码中仅仅可以绘制矩形，好单一的感觉。</p>    <p>修改后的这个的入口：</p>    <pre>  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();        }      }    },</pre>    <p>默认依然绘制矩形，但是根据传入的类别，可以绘制图形的图形，如type==='exclamation'，程序会调用_.drawExclamation();方法，我们看看drawExclamation()方法的定义：</p>    <pre>  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);   },</pre>    <p>代码中显示，首先绘制矩形Box，其次绘制传入的文字，这样我们的货币汇率表就很容易实现了。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e33622a57a64cb5d3ee821ddd07f5b1e.png"></p>    <h3>阴影图形</h3>    <pre>  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);        }      }    },</pre>    <p>效果图：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e03898d9b86905236cd9780bd2a3d1bf.png"></p>    <p>其他形状的图标类似，不再陈述。多看看一些效果图吧：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0546323b5ef0925a8e0b694f0794bc2c.png"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/dae89a3276a3420c58a847dc207ecfe3.png"></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008710821</p>    <p> </p>