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 剧场版 你必须知道的javascript
May 27 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js的延迟执行问题分析
Jun 23 Javascript
前端jquery部分很精彩
May 03 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
Node.js笔记之process模块解读
May 31 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
vue3使用vuedraggable实现拖拽功能
Apr 06 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python for循环中的陷阱详解
2018/07/13 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
农民工创业典型事迹
2014/01/25 职场文书
列车长先进事迹材料
2014/01/25 职场文书
霸王洗发水广告词
2014/03/14 职场文书
中职生自荐信范文
2014/06/15 职场文书
计划生育工作汇报
2014/10/28 职场文书
整改报告怎么写
2014/11/06 职场文书
团代会开幕词
2015/01/28 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android