ichart.js绘制虚线、平均分虚线效果的实现代码
rush:js;">
var Data=new Array();
Data[0] = {
labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"],datasets : [
{
name : '优秀率',color:'#1dbcfe',line_width:4,value : [80,75,92,62,0]
}
]
}
Data[1] = {
labels : ["第一单元",value : [50,11,77,90]
}
]
}
Data[2] = {
labels : ["第一单元",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,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:'b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om',labels:Data[i].labels
}]
}
});
/**
*<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>组件,画平均线。
*/
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,//计算出的平均分写<a href="https://www.jb51.cc/tag/zaizhe/" target="_blank" class="keywords">在这</a>即可
coo = chart.getCoordinate(),x = coo.get('originx'),W = coo.width,S = coo.getScale('left'),H = coo.height,h = (avg - S.start) * H / S.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>tance,y = chart.y + H - h;
for(xi=x;xi<=(x+W);xi=xi+32){
chart.target.line(xi,y,xi+16,2,'#fe941c');
}
chart.target.textAlign('start')
.textBaseline('middle')
.textFont('500 20px Verdana')
.fillText('平均战胜率'+avg+'%',x+W-100,y-20,false,'#fe941c');
}
}));
chart.draw();
});</pre>
以上代码是绘制多个折线图的js示例,以及在每个折线图内绘制平均分虚线的方法。
ichart.js是一个十分不错的图标绘制js,缺点是在移动端需要先设置两倍大小,再用css和js手动缩小到正常范围,以使其在屏幕上保持高清。
官网有绘制平均线的示例,但是没有虚线的,而一般为了不混淆,平均线都是使用虚线绘制的。这里我只是循环绘制了n端直线,算是一个变通的方法。如有更好的方法请留言哦谢谢。
以上这篇ichart.js绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。