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