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 相关文章推荐
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
理解JS绑定事件
Jan 19 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
redux处理异步action解决方案
Mar 22 Javascript
Vue实现下拉加载更多
May 09 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
使用数据库保存session的方法
2006/10/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python print出共轭复数的方法详解
2019/06/25 Python
django 模型中的计算字段实例
2020/05/19 Python
Python读写压缩文件的方法
2020/07/30 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
银行介绍信范文
2014/01/10 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python