/* canvas组件对象 */
var H5ComponentPolyline=function(name,cfg){
	var component = new H5ComponentBase(name ,cfg);
	//绘制网格线
	var w = cfg.width;
	var h = cfg.height;
	
	//加入一个画布
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.width = w;
	cns.height = ctx.height = h;
	
	//水平网格线 100分-10份
	var step = 10;
	ctx.beginPath();
	ctx.lineWidth = 1;
	ctx.strokeStyle = '#ccc';
	
	window.ctx = ctx;
	for (var i = 0; i<step+1; i++) {
		var y = (ctx.height/step)*i;
		ctx.moveTo(0,y);
		ctx.lineTo(w,y);
	};
	
	//垂直网格线 根据项目的个数来划分
	step = cfg.data.length+1;
	for (var i = 0; i<step+1; i++) {
		var x = (ctx.width/step)*i;
		ctx.moveTo(x,0);
		ctx.lineTo(x,h);
	};
	ctx.stroke();
	component.append(cns);
	
	
	//绘制折线数据
	var x = 0;
	var y = 0;
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.width = w;
	cns.height = ctx.height = h;
	
	//绘制折线原点
	var step = 10;
	ctx.beginPath();
	ctx.lineWidth = 6;
	ctx.strokeStyle = 'red';
	var row = w/(cfg.data.length+1);
	$.each(cfg.data, function(index , item) {
		x = row*(index+1);
		y = (1-item[1])*h;
		ctx.moveTo( x , y );
		ctx.arc( x ,y ,3.5 ,0,2*Math.PI);
	});
	
	//把点连线
	ctx.moveTo( row , (1-cfg.data[0][1])*h);
	$.each(cfg.data, function(index , item) {
		x = row*(index+1);
		y = (1-item[1])*h;
		ctx.lineTo( x , y );
	});
	
	//在点上写出数据
	$.each(cfg.data, function(index , item) {
		x = row*(index+1);
		y = (1-item[1])*h;
		var cns_text=item[1]*100+'%';
		
		
		//具体问题出在这具体问题出在这具体问题出在这具体问题出在这
		ctx.fillText (cns_text ,x-10 ,y-14);   // 加入样式文字数据
		
		if (item[2]) {              // 加入样式颜色
			ctx.fillStyle = item[2];
		} else{
			ctx.fillStyle= '#ccc' ;			
		};

	});
	//具体问题出在这具体问题出在这具体问题出在这具体问题出在这
	
	
	ctx.stroke();
	component.append(cns);
	
	return component;
};