【ife】任务十七：零基础JavaScript编码（五）

function getDateStr(dat) {
	var y = dat.getFullYear();
	var m = dat.getMonth() + 1;
	m = m < 10 ? '0' + m : m;
	var d = dat.getDate();
	d = d < 10 ? '0' + d : d;
	return y + '-' + m + '-' + d;
}
function randomBuildData(seed) {
	var returnData = {};
	var dat = new Date("2016-01-01");
	var datStr = ''
	for (var i = 1; i < 92; i++) {
		datStr = getDateStr(dat);
		returnData[datStr] = Math.ceil(Math.random() * seed);
		dat.setDate(dat.getDate() + 1);
	}
	return returnData;
}


var aqiSourceData = {
	"北京": randomBuildData(500),
	"上海": randomBuildData(300),
	"广州": randomBuildData(200),
	"深圳": randomBuildData(100),
	"成都": randomBuildData(300),
	"西安": randomBuildData(500),
	"福州": randomBuildData(100),
	"厦门": randomBuildData(100),
	"沈阳": randomBuildData(500)
};

var chartData = {};

var pageState = {
	nowSelectCity: -1,
	nowGraTime: "day"
}

function renderChart(data, type) {
	var ic = document.getElementById("aqi-chart-wrap"); 
	ic.innerHTML = ""; 
	var max = 0; 
	for (var date in data) {
		if (data[date] > max)
			max = data[date];
	}
	var topOffsetPercent = 180 / max; 
	var i = 0;
	for (var date in data) { 
		var bar = document.createElement("div"); 
		bar.id = date + "_" + data[date]; 
		if (type == "day")
			bar.style.left = (i * 10) + "px"; 
		else if (type == "week")
			bar.style.left = (i * 20) + 325 + "px"; 
		else
			bar.style.left = (i * 40) + 395 + "px"; 
		bar.style.height = Math.round(topOffsetPercent * data[date]) + "px"; 
		if (type == "day")
			bar.style.width = "10px"; 
		else if (type == "week")
			bar.style.width = "20px"; 
		else
			bar.style.width = "40px";
		bar.style.position = "absolute";  
		bar.style.overflow = "hidden"; 
		bar.setAttribute("title", date + "：" + data[date]); 
		bar.setAttribute("class", "bgColor" + Math.floor(Math.random() * 10));
		bar.style.display = "block"; 
		bar.style.top = 200 - Math.round(topOffsetPercent * data[date]) + "px"; 
		ic.appendChild(bar);
		i++;
	} 	
}

function graTimeChange() {
	var radios = document.getElementsByName("gra-time");
	for (var i = 0; i < radios.length; i++) {
		if (radios[i].checked) {
			type = radios[i].value;
			break;
		}
	}
	if (pageState.nowGraTime != type) (
		pageState.nowGraTime = type;
		var data = [];
		var city = pageState.nowSelectCity;
		if (city == -1)
			city = document.getElementById("city-select").value;;
		if (type == "day")
			data = chartData[city][0];
		else if (type == "week")
			data = chartData[city][1];
		else 
			data = chartData[city][2];
		renderChart(data, type);
	}
}

function citySelectChange() { 
	var city = document.getElementById("city-select").value;
	if (pageState.nowSelectCity != city) ( 
		pageState.nowSelectCity = city;
		var data = [];
		if (pageState.nowGraTime == "day")
			data = chartData[city][0];
		else if (pageState.nowGraTime == "week")
			data = chartData[city][1];
		else 
			data = chartData[city][2];
		renderChart(data, type);
	}
}

function initGraTimeForm() {
	var radios = document.getElementsByName("gra-time");
	for (var i = 0; i < radios.length; i++) 
		radios[i].onchange = graTimeChange;
}

function initCitySelector() {
	var selects = document.getElementById("city-select");
	selects.removeChild(document.getElementsByTagName("option")[0]);
	for (var property in aqiSourceData) {
		var city = document.createTextNode(property);
		var options = document.createElement("option");
		options.appendChild(city);
		selects.appendChild(options);
	}
	selects.onchange = citySelectChange;
}

function initAqiChartData() {
	for (var property in aqiSourceData) {
		var dayData = aqiSourceData[property];
		var datas = [];
		datas.push(dayData);
		var weekData = [];
		var weekavg = 0;
		var weeksum = 0;
		var count = 0;
		for (var days in dayData) {
			var day = new Date(days).getDay(); 
			weeksum += dayData[days];
			count++;
			if (day == 0) {
				weekavg = parseInt(weeksum / count);
				weekData.push(weekavg);
				weekavg = 0;
				weeksum = 0;
				count = 0;
			}
		}
		datas.push(weekData);
		var preMonth = 0;
		var monthData = [];
		var monthavg = 0;
		var monthsum = 0;
		for (var days in dayData) {
			var month = new Date(days).getMonth();
			monthsum += dayData[days];
			count++;
			if (month != preMonth) {
				monthavg = parseInt(monthsum / count);
				monthData.push(monthavg);
				monthavg = 0;
				monthsum = 0;
				count = 0;
				preMonth = month;
			}
		}
		monthavg = parseInt(monthsum / count);
		monthData.push(monthavg);
		datas.push(monthData); 
		chartData[property] = datas; 
	}
}

function init() {
	initGraTimeForm()
	initCitySelector();
	initAqiChartData();
}

init();