|
下面小编就为大家带来一篇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绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。 |
发表于 2018-12-25 04:52:06
