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;         
//相對於原來的繪製直線，修改成循環繪製n段直線                                                  
               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