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

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绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

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

    ichart.js绘制虚线.平均分虚线效果的实现代码 var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], datasets : [ { name : '优秀率', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1]

  • 基于JS绘制2021的烟花效果 附源码下载

    该作品是运用到了前端开发的知识内容(JS内容),但是运用到了前段比较后面的知识了,该作品可以用做网页设计的背景是一个不错的选择,以下式该程序运行的效果图,HTML,CSS中多部分的运用与设置,就是单词的字面意思 以下是该作品呈现的效果图: 调用JS使用时,JS里面的内容不需要做过多的研究与了解,只需给你一个JS文件会调用即可,但是HTML,CSS的内容中的至少的单词要知道意思与会运用,以下是HTML部分中的代码(主要还是调用后缀为JS的文件里的内容) <!DOCTYPE html> <h

  • js编写当天简单日历效果【实现代码】

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

  • JS实现的另类手风琴效果网页内容切换代码

    本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • 使用原生JS实现滚轮翻页效果的示例代码

    一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m

  • Vue.js实现按钮的动态绑定效果及实现代码

    实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

  • parabola.js抛物线与加入购物车效果的示例代码

    在做购物车的时候发现一个很好用抛物线特效parabola.js,可先点击DEMO体验下.下面贴出一些关键代码,具体代码可在GitHub上查看 parabola.js var funParabola = function (element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面动不动就几百像素 * 页面上,我们放两个物体,200~800像素之间,我们可以映射为现实世界的2米到8米,也就是100:1 * 不过

  • Js自定义多选框效果的实例代码

    前端入坑纪 27 工作中的一个多选效果,感觉不算太难,就上传来分享下. 以上图文,纯属测试,如有雷同,请勿当真 HTML 结构 <div id="selexWps" class="seletProds clear"> <div> <span>积分<em>5000</em></span> ![](wrap/img/pic.png) <p>请选择</p> </div&g

  • js实现旋转的星空效果

    本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta nam

  • js实现多张图片延迟加载效果

    本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--做移动端响应式必须加的样式--> <meta content="width=device-width, initial-scale=1.0, maximum-

随机推荐