时间:2021-07-01 10:21:17 帮助过:123人阅读
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
千里之行,始于足下。我们先从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"} } } }] }
运行结果
至此,简单的入门已经完成,但是不能仅限于此,拓展下思路,如果柱状图不仅仅是单色填充,而是各式各样的图形,或者具有渐变效果的填充,该如何实现呢?
首先看看我想实现的效果
再有:
查阅了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-组件定制图形库图表/报表开发教程的详细内容,更多请关注Gxl网其它相关文章!