ichart.js绘制虚线、平均分虚线效果的实现代码


Posted in Javascript onMay 05, 2016

ichart.js绘制虚线、平均分虚线效果的实现代码

var Data=new Array(); 
    Data[0] = { 
      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 
      datasets : [ 
        { 
          name : '优秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [80,75,92,62,0] 
        } 
      ] 
    } 
    Data[1] = { 
      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 
      datasets : [ 
        { 
          name : '优秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [50,11,62,77,90] 
        } 
      ] 
    } 
    Data[2] = { 
      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 
      datasets : [ 
        { 
          name : '优秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [80,51,32,44,80] 
        } 
      ] 
    } 
     
    var _bodyWidth=$('body').width()-16; 
    $('.item').each(function(i){ 
      var _id=$(this).find('.canvas-wrap').attr('id'); 
      var chart = new iChart.LineBasic2D({ 
        render : _id, 
        data: Data[i].datasets, 
        align:'center', 
        border:0, 
        width : _bodyWidth*2, 
        height : _bodyWidth*1.2, 
        background_color:'#fafafa', 
        animation : true,//开启过渡动画 
        animation_duration:600,//600ms完成动画 
         
        sub_option : { 
          smooth : true, 
          hollow:false, 
          hollow_inside:false, 
          point_size:16, 
          listeners : { 
            parseText : function(r, t) { 
              return t+'%'; 
            } 
          }, 
          label:{fontsize:24,color:'#333'}, 
        }, 
        coordinate:{ 
          width:_bodyWidth*1.6, 
          valid_width:_bodyWidth*1.4, 
          height:_bodyWidth*1.6*.5, 
          striped_factor : 0.18, 
          axis:{ 
            color:'#aaa', 
            width:[0,0,8,0] 
          }, 
          scale:[{ 
             position:'left',  
             start_scale:0, 
             end_scale:100, 
             scale_space:20, 
             scale_size:2, 
             scale_enable : false, 
             label : {color:'#999',fontsize:24}, 
             scale_color:'#999'
          },{ 
             position:'bottom', 
             label : {color:'#999',fontsize:24}, 
             scale_enable : false, 
             labels:Data[i].labels 
          }] 
        } 
         
      }); 
      /** 
       *自定义组件,画平均线。 
       */
      chart.plugin(new iChart.Custom({ 
          drawFn:function(){ 
            /** 
             *计算平均值的高度(坐标Y值) 
             */ 
             var _total=0; 
            $.each(Data[i].datasets[0].value,function(i,val){ 
              _total+=val; 
            }); 
            var avg = _total/Data[i].datasets[0].value.length,//计算出的平均分写在这即可 
              coo = chart.getCoordinate(), 
              x = coo.get('originx'), 
              W = coo.width, 
              S = coo.getScale('left'), 
              H = coo.height, 
              h = (avg - S.start) * H / S.distance, 
              y = chart.y + H - h; 
            for(xi=x;xi<=(x+W);xi=xi+32){ 
              chart.target.line(xi,y,xi+16,y,2,'#fe941c'); 
            } 
            chart.target.textAlign('start') 
            .textBaseline('middle') 
            .textFont('500 20px Verdana') 
            .fillText('平均战胜率'+avg+'%',x+W-100,y-20,false,'#fe941c'); 
          } 
      })); 
      chart.draw(); 
    });

以上代码是绘制多个折线图的js示例,以及在每个折线图内绘制平均分虚线的方法。

ichart.js是一个十分不错的图标绘制js,缺点是在移动端需要先设置两倍大小,再用css和js手动缩小到正常范围,以使其在屏幕上保持高清。

官网有绘制平均线的示例,但是没有虚线的,而一般为了不混淆,平均线都是使用虚线绘制的。这里我只是循环绘制了n端直线,算是一个变通的方法。如有更好的方法请留言哦谢谢。

以上这篇ichart.js绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 #Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 #Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
php入门小知识
2008/03/24 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
python 自动去除空行的实例
2018/07/24 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python实现Zabbix-API监控
2018/09/17 Python
详解Python3注释知识点
2019/02/19 Python
Python中dict和set的用法讲解
2019/03/28 Python
django-allauth入门学习和使用详解
2019/07/03 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
中学生自我鉴定
2014/02/04 职场文书
微电影大赛策划方案
2014/06/05 职场文书
代领报检证委托书范本
2014/10/11 职场文书
初中信息技术教学反思
2016/02/16 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
python文件目录操作之os模块
2021/05/08 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android