Ichart.js Implementation Code for Drawing Dotted Lines and Average Dividing Dotted Lines Effects
var Data=new Array(); Data[0] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [50,11,62,77,90] } ] } Data[2] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', 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,//Open transition animation animation_duration:600,//600ms completed animation 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 }] } }); /** *Customize component, draw the average line. */ chart.plugin(new iChart.Custom({ drawFn:function(){ /** *Calculate the height of the average value (coordinate Y value) */ var _total=0; $.each(Data[i].datasets[0].value,function(i,val){ _total+=val; }); var avg = _total/Data[i].datasets[0].value.length,//Write the calculated average score here 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('Average Win Rate'+avg+'%',x+W-100,y-20,false,'#fe941c'); } })); chart.draw(); });The above code is an example of js for drawing multiple line charts and a method of drawing an average dotted line within each line chart.
ichart.js is a very good icon drawing js. The disadvantage is that on the mobile side, you need to set twice the size first, and then manually narrow it to the normal range with css and js to keep it high-definition on the screen.
There are examples of drawing average lines on the official website, but there are no dotted lines. Generally, in order not to be confused, the average lines are drawn using dotted lines. Here I just looped to draw the n-end straight line, which is a workaround. If there is a better way, please leave a message. Thank you.
The above code for drawing dotted lines and equally divided dotted lines in ichart.js is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.