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