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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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 编写的 25个游戏脚本
2009/05/11 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript的BOM汇总
2015/07/16 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python引用DLL文件的方法
2015/05/11 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python dict如何定义
2020/09/02 Python
设计毕业生简历中的自我评价
2013/10/01 职场文书
实习生自我评价
2014/01/18 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
个人借款协议书范本
2014/11/17 职场文书
关于车尾的标语大全
2015/08/11 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
我的收音机情缘
2022/04/05 无线电