你的位置:首页 > Java教程

[Java教程]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端直线,算是一个变通的方法。如有更好的方法请留言哦谢谢。

 

ps:欢迎访问我的小站:模板世界,获取更多有用的前端资源。

 

XD