记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

快捷导航
查看: 41015|回复: 0
收起左侧

[HTML5/CSS3] iChart--组件定制

[复制链接]
发表于 2017-8-27 22:57:20 | 显示全部楼层 |阅读模式
<article>
                                        <html>
<head></head>
<body>
  <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>
&lt;script type="text/javascript"src="ichart.1.2.min.js"&gt;&lt;/script&gt;</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;"></p>
  <p>至此,简单的入门已经完成,但是不能仅限于此,拓展下思路,如果柱状图不仅仅是单色填充,而是各式各样的图形,或者具有渐变效果的填充,该如何实现呢?</p>
  <h2>No2.定制属于自己的柱状图</h2>
  <p>首先看看我想实现的效果</p>
  <p style="text-align: center;"></p>
  <p>再有:</p>
  <p style="text-align: center;"></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 &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);
},</pre>
  <p>代码中显示,首先绘制矩形Box,其次绘制传入的文字,这样我们的货币汇率表就很容易实现了。</p>
  <p style="text-align: center;"></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&lt;= 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;"></p>
  <p>其他形状的图标类似,不再陈述。多看看一些效果图吧:</p>
  <p style="text-align: center;"></p>
  <p style="text-align: center;"></p>
  <p>&nbsp;</p>
  <p>来自:https://segmentfault.com/a/1190000008710821</p>
  <p>&nbsp;</p>
</body>
</html><h2><strong>扩展阅读</strong></h2><a title=Chart.js - 简单的html5图表组件 href="/lib/view/open1363597707578.html"><span class=title>Chart.js - 简单的HTML5图表组件</span></a><br><a title=AngularJS 的 html5 视频播放器:videogular href="/lib/view/open1425263481400.html"><span class=title>AngularJS 的 HTML5 视频播放器:Videogular</span></a><br><a title=HTML5 画板组件 rocanvas href="/lib/view/open1330480102014.html"><span class=title>HTML5 画板组件 RoCanvas</span></a><br><a title=文件上传组件:file upload html5 href="/lib/view/open1415520679933.html"><span class=title>文件上传组件:file upload html5</span></a><br><a title=免费的HTML5响应式商业/产品组合模板:AmazingBiz href="/lib/view/open1390313852882.html"><span class=title>免费的HTML5响应式商业/产品组合模板:AmazingBiz</span></a><br><h2><strong>为您推荐</strong></h2><a title=Struts2 s:doubleselect级联下拉框 详解析 href="/lib/view/open1385209022041.html"><span class=title>Struts2 s:doubleselect级联下拉框 详解析 </span></a><br><a title=web安全实战 href="/lib/view/open1390654081789.html"><span class=title>web安全实战</span></a><br><a title=Javascript验证上传图片大小[前台处理] href="/lib/view/open1433233376416.html"><span class=title>Javascript验证上传图片大小[前台处理]</span></a><br><a title=EvaThumber:基于URL的图片处理库 (可实现缩略图 | 二维码 水印 面部识别等) href =/lib/view/open1362474205154.html><span class=title>EvaThumber:基于URL的图片处理库 (可实现缩略图 | 二维码 | 水印 | 面部识别等)</span></a><br><a title=html5 实现简单的上传 href="/lib/view/open1453288102261.html"><span class=title>html5 实现简单的上传</span></a><br><h2><strong>更多</strong></h2><a title=HTML5 href="https://www.baidu.com/s?wd=site:open-open.com HTML5"><span class=title>HTML5</span></a><br><a title=图表/报表制作 href="https://www.baidu.com/s?wd=site:open-open.com 图表/报表制作"><span class=title>图表/报表制作</span></a><br>
                                </article>
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )