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