本文介绍如何使用ichart.js在折线图中绘制平均分虚线。由于官方示例仅支持实线，作者通过循环绘制多段直线实现虚线效果。同时指出ichart.js在移动端需先设置两倍大小再通过CSS和JS缩小以保持高清显示，提供了实用的变通方案。
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();
});上述代码展示了如何绘制包含多条折线的图表，并在每条折线内部添加表示平均分的虚线。
ichart.js是一款优秀的图表绘制JavaScript库，但其存在一个缺点：在移动端设备上，必须先设置两倍大小的画布，随后通过CSS和JavaScript手动将其缩小至正常尺寸，从而确保在屏幕上呈现高清效果。
官网提供的示例中仅包含绘制平均实线的功能，并未提供虚线支持。通常情况下，为了避免视觉混淆，平均线通常以虚线形式呈现。本文通过循环绘制多段直线的方式实现了这一效果，作为一种变通方案。若读者有更优的实现方法，欢迎留言交流。
以上分享了ichart.js绘制虚线及平均分虚线的实现代码，希望能对读者有所帮助，也欢迎大家继续支持本站。