星空网 > 软件开发 > 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

 




原标题:ichart.js绘制虚线 ,平均分虚线

关键词:JS

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

马来西亚物流货运专线:https://www.goluckyvip.com/tag/90444.html
马来西亚物流专线货运:https://www.goluckyvip.com/tag/90445.html
马来西亚专线货运物流:https://www.goluckyvip.com/tag/90446.html
马来西亚专线物流:https://www.goluckyvip.com/tag/90447.html
专线物流马来西亚:https://www.goluckyvip.com/tag/90448.html
马来西亚专线运输:https://www.goluckyvip.com/tag/90449.html
欧洲B2B电商市场有待挖掘!销售总额将达1.7万亿欧元:https://www.kjdsnews.com/a/1836643.html
​小米汽车只是前菜,雷军的野心绝不止此:https://www.kjdsnews.com/a/1836644.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流