ichart.js绘制虚线、平均分虚线效果的实现代码
ichart.js绘制虚线、平均分虚线效果的实现代码
varData=newArray(); 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'); varchart=newiChart.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){ returnt+'%'; } }, 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(newiChart.Custom({ drawFn:function(){ /** *计算平均值的高度(坐标Y值) */ var_total=0; $.each(Data[i].datasets[0].value,function(i,val){ _total+=val; }); varavg=_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('50020pxVerdana') .fillText('平均战胜率'+avg+'%',x+W-100,y-20,false,'#fe941c'); } })); chart.draw(); });
以上代码是绘制多个折线图的js示例,以及在每个折线图内绘制平均分虚线的方法。
ichart.js是一个十分不错的图标绘制js,缺点是在移动端需要先设置两倍大小,再用css和js手动缩小到正常范围,以使其在屏幕上保持高清。
官网有绘制平均线的示例,但是没有虚线的,而一般为了不混淆,平均线都是使用虚线绘制的。这里我只是循环绘制了n端直线,算是一个变通的方法。如有更好的方法请留言哦谢谢。
以上这篇ichart.js绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。