你的位置:首页 > 软件开发 > Java > ichart.js绘制虚线 ,平均分虚线

ichart.js绘制虚线 ,平均分虚线

发布时间:2016-05-05 11:00:07
var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], data ...
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绘制虚线 ,平均分虚线

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。