iChart-组件定制图形库图表/报表开发教程

百变鹏仔 2个月前 (10-18) #H5教程

文章标签报表

导语

ichartjs 是一款基于html5的图形库。使用纯javascript语言, 利用html5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是web/app图表展示方面的解决方案。如果你正在开发html5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于apache license 2.0协议的开源项目。

No1.一分钟快速入门教程-Hello World

千里之行，始于足下。我们先从Hello World开始。

首先引入js文件

<script></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 &amp;&amp; _.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<p> </p><p>效果图：</p><p style="text-align: center;"><img  src="https://img.php.cn/upload/article/000/000/164/1a9c2a4bd2c47e58faf1caa96f0dad73-4.png" alt="iChart-组件定制图形库图表/报表开发教程" ></p><p>其他形状的图标类似，不再陈述。多看看一些效果图吧：</p><p   style="max-width:90%"><img  src="https://img.php.cn/upload/article/000/000/164/1a9c2a4bd2c47e58faf1caa96f0dad73-5.png" alt="iChart-组件定制图形库图表/报表开发教程" ></p><p   style="max-width:90%"><img  src="https://img.php.cn/upload/article/000/000/164/5d61b846f35f7cf1551574be1cdd1b2e-6.png" alt="iChart-组件定制图形库图表/报表开发教程" ></p><p> </p><p>  			</p>

文章推荐

iChart-组件定制图形库图表/报表开发教程

导语

No1.一分钟快速入门教程-Hello World

No2.定制属于自己的柱状图

字符串图形

阴影图形

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集