ssp_web/src/main/webapp/assets/operator/js/diagram.js

$(function(){
	var flow=[];
	var tipLabel=new Array("PV","UV","Impression","Click","Income");
	var pv=tipLabel[0];
	$.ajax({
		type : 'post',
		url : '/ssp_operator/main/dashboard/list',
		async : false,
		cache : false,
		dataType : 'json',
		success : function(data){
			var pvArray = [];
			var uvArray = [];
			var impressionArray = [];
			var clickArray = [];
			var incomeArray = [];
			 $.each(data,function(n,value) {
				 pvArray[n] = value.pv;
				 uvArray[n] = value.uv;
				 impressionArray[n] = value.impression;
				 clickArray[n] = value.click;
				 incomeArray[n] = value.income;
		      });
			 flow[0] = pvArray;
			 flow[1] = uvArray;
			 flow[2] = impressionArray;
			 flow[3] = clickArray;
			 flow[4] = incomeArray;
			 
		},
		error : function (XMLHttpRequest, textStatus, errorThrown) {
		    // 通常 textStatus 和 errorThrown 之中
		    // 只有一个会包含信息
			alert('error');
		    this; // 调用本次AJAX请求时传递的options参数
		}
	});
	var data = [
	            {
	            	name : 'PV',
	            	value:flow[0],
	            	color:'#68ba31',
	            	line_width:2
	            }
	            ];
	drawDiagram(data,pv);
	$('#data_number td').click(function(){
		$('#data_number td').css({"background-color":"#ffffff","color":"black"});
		$(this).css({"background-color":"#344c67","color":"#ffffff"});
		var n = $(this).index();
		pv=tipLabel[n];
		var data = [
		            {
		            	name : 'UV',
		            	value:flow[n],
		            	color:'#68ba31',
		            	line_width:2
		            }
		            ];
		$('#baseTitle').text('近7天全部广告位' + pv);
		drawDiagram(data,pv);
	});
});

function drawDiagram(data,pv){
	//设置日期，当前日期的前七天
	var myDate = new Date(); //获取今天日期
	var myYear = myDate.getFullYear();//获取年份
	myDate.setDate(myDate.getDate() - 7);
	var labels = [];
	var dateTemp;
	var flag = 1;
	for (var i = 0; i < 7; i++) {
		dateTemp = myDate.getFullYear() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getDate();
		labels.push(dateTemp);
		myDate.setDate(myDate.getDate() + flag);
	}
	var verticalLine = 6;//图表垂直线的数量
	var chart = new iChart.LineBasic2D({
		background_color:'#ffffff',//组件中背景颜色(填充色)的值。(默认为'FEFEFE')
		border:{	//Object, 此处设置了开启边框配置项。
			enable:false,//无边框
			width:1,	
			color:'red'
		},
		color :'#adadad',//String 组件中字体颜色的值。(默认为'black')
		data : data,//Array	必需属性,图表的数据源。
		width : 1289,//Number	图表的宽度，单位px。
		height : 330,//图表的高度，单位px。
		//id : 'canvas'//	String	组件的唯一id。(默认自动分配一个字符串).
		//padding : '0 0 10 10',//	Number	组件中内边框的值,规则与css中的一致，单位像素。(默认为10)
		render : 'diagram',//String	图表渲染的HTML DOM的id。(默认为'').
		//title:{ 		//Object/String	标题的配置项，若给出字符串，则用默认配置进行渲染标题，若给出对象，则配置为 iChart.Text对象。如果text属性为空则不显示标题。
			//text:'近7天全部广告位PV',
			//offsety:100
		//},
		//z_index	Number 设置绘图区的组件的显示层级为999，使其在最上层显示。

		//提示框的配置项.详情请参考 iChart.Tip Note:设置为false表示禁用提示框。(默认为false)
		tip:{  	//Object	提示框的配置项.详情请参考 iChart.Tip Note:设置为false表示禁用提示框。(默认为false)
			enable:true,
			border:{
				enable:true,
				radius : 5,
				width:2,
				color:'#344c68'
			},
			style:"background-color:#344c68;color:#ffffff;text-align:center;",//String	指定此dom的css值。
			//text	String	提示框中的文本值。(默认为'')
			listeners:{
				//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
				parseText:function(tip,name,value,text,i){
					return "<span >"+labels[i]+""+
					"</span><br/><span>"+ pv +":"+value+"</span>";
				}
			}
		},
		//配置十字线
		crosshair:{ //Object 十字线的配置(默认的enable为false).请参考iChart.CrossHair
						//说明:
						//1.此配置有一个额外的属性enable表示是否开去十字线(默认为false)
						//2.此配置会自动覆盖coordinate中的crosshair配置。配置十字线应该用此配置。
			enable:true,
			line_color:'#0072c6',	
			//border	Object	此组件中边框的属性样式。
						//此属性是一个对象，可用的属性如下：
						//@Option enable {boolean} 是否边框可用。(默认为false)
						//@Option color {String} 边框的颜色。(默认为'#BCBCBC')
						//@Option width {Number/String} 边框的宽度,单位px。如果为字符串，其宽度值解析方式与css的padding一致。且radius将会设置为0。(默认为1)
						//@Option radius {Number/String} 边框的圆角值.如果给出字符串，解析方式与css的padding一致。(默认为0)
			//line_width	Number	十字线的宽度。单位px。(默认为1)
			//style	String	组件的自定义css。(默认为 '') 类似:'padding:10px;font-size:12px'
		},
		sub_option : { //图中折线段的配置项。
			label:false,
			hollow:true,
			hollow_color:'#ffffff',
			hollow_inside:true,
			intersection:true,
			sign:'round',
			point_size:12,
		},
		coordinate:{ //Object 坐标系的配置项。请参考iChart.Coordinate2D
			border:false,
			width:"95%",
			height:"90%",
			grid_color:'#adadad',//String	网格的颜色值。(默认为'#dbe1e1')
			//grid_line_width	Number	网格的宽度值。(默认为1)
			axis:{		//坐标轴轴线的配置项。可配置属性值:@Option enable {Boolean} 是否启用轴配置(默认为 true)
				color:'#adadad',				//@Option color {String} 轴的颜色.(默认为 '#666666')
				width:[0,0,1,1]					//@Option width {Number/Array} 轴的宽度, 如果给出数组，则为四个边的宽度，例如:[1,0,0,1](上-右-下-左).(默认为1)			
			},
			grids:{ //配置自定义网格线。提供水平和垂直网格的配置。水平方向由horizontal指定，垂直方向由vertical指定。
				vertical:{
					way:'share_alike',//网格生成方式
					value:verticalLine,//指定网格的数量(线条数-1)。
				}
			},
			scale:[{
				position:'left',	
				textAlign:'center',
				//end_scale:100,//Number 结束刻度值。这个值若没有给定，则用max_scale作为结束的刻度值。(默认为undefined)
				//scale_space:20,//刻度值的间距值，要小于(最大值-最小值)。(默认为undefined)
				scale_enable:false,
				label : {color:'#344c67',fontsize:11},//标签的配置项。
			},{
				position:'bottom',	
				textAlign:'center',
				scale_enable:false,//是否显示刻度线。(默认为true)
				label : {color:'#344c67',fontsize:11},
				labels:labels,//Array	自定义的标签文本。(默认为空数组)
			}]
		}
	})
	//利用自定义组件构造左侧说明文本
	/*chart.plugin(new iChart.Custom({
		drawFn:function(){
			//计算位置
			var coo = chart.getCoordinate(),
			x = coo.get('originx'),
			y = coo.get('originy'),
			w = coo.width,
			h = coo.height;
			//在左上侧的位置，渲染一个单位的文字
			chart.target.textAlign('start')
			.textBaseline('top')
			.textFont('#adadad')
			.fillText(myYear,x-12,y+h+20,false,'#9d987a')
			.textBaseline('top')
			.fillText(myYear,x+w-12,y+h+20,false,'#9d987a');

		}
	}));*/

	//开始画图
	chart.draw();
}