溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
一,實(shí)現(xiàn)理論基礎(chǔ)
（1）首先使用pageState這個對象記錄當(dāng)前頁面的選項(xiàng)，根據(jù)不同選項(xiàng)來切換數(shù)據(jù)顯示
（2）使用時期函數(shù)，隨機(jī)生成測試數(shù)據(jù)
（3）使用innerHTML給頁面實(shí)時添加渲染的內(nèi)容圖表
（4）使用隨機(jī)數(shù)，生成隨機(jī)的不同顏色給條形圖
（5）使用title屬性，來實(shí)現(xiàn)當(dāng)鼠標(biāo)移動到某個層面上，顯示title內(nèi)容的提示框
（6）使用事件代理將各個radio的變化事件函數(shù)，綁定到其父元素上
（7）使用new Date(item)).getDay() == 6來某一天是周幾，如果是6,就說明此時是日歷上的完整一周
（8）使用getMonth()來統(tǒng)計(jì)月份
最終獲得月平均量，周平均量，天平均量數(shù)值，通過柱形圖顯示出來
二.html代碼
<body> <fieldset id="form-gra-time"> <legend>請選擇日期粒度及成城市：</legend> <span id="city">請選擇日期粒度:</span> <label>日<input name="gra-time" value="day" type="radio" checked="checked"></label> <label>周<input name="gra-time" value="week" type="radio"></label> <label>月<input name="gra-time" value="month" type="radio"></label> <span id="city">請選擇城市:</span> <select id="city-select" value="city"> <option>北京</option> </select> </fieldset> <div class="aqi-chart-wrap"> </div> <script src="task17(2).js"></script> </body>
三.js代碼
//跨瀏覽器事件綁定
function addEventHandler(ele, event, hanlder) {
if (ele.addEventListener) {
ele.addEventListener(event, hanlder, false);
} else if (ele.attachEvent) {
ele.attachEvent("on"+event, hanlder);
} else {
ele["on" + event] = hanlder;
}
}
// 以下兩個函數(shù)用于隨機(jī)模擬生成測試數(shù)據(jù)
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)
};
// 用于渲染圖表的數(shù)據(jù)
var chartData = {};
// 記錄當(dāng)前頁面的表單選項(xiàng)
var pageState = {
nowSelectCity: "北京",
nowGraTime: "day"
}
var flag = 0;//0，表示當(dāng)前是通過改變時間，1.表示改變城市
var formGraTime = document.getElementById('form-gra-time');
var citySelect = document.getElementById('city-select');
var aqiChartWrap = document.getElementsByClassName('aqi-chart-wrap')[0];
/**
* 渲染圖表
*/
function renderChart() {
var color = '',text = '';
text += "<div class='title'>" + pageState.nowSelectCity + "市01-03月"+pageState.nowGraTime+"平均空氣質(zhì)量報(bào)告</div>";
for (var item in chartData) {
color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
text += '<div title="'+item+":"+chartData[item]+'" ></div>';
}
aqiChartWrap.innerHTML = text;
}
/**
radio，select變化時的處理函數(shù)
* 根據(jù)選擇的flag，以及targetValue值來確定進(jìn)行切換顯示，flag=0表示是根據(jù)選擇
的日，周，月，進(jìn)行切換，flag=1表示是根據(jù)選擇的城市來進(jìn)行切換。
*/
function showChange(flag,targetValue){
if(flag == 0){
if (pageState.nowGraTime !== targetValue) {
pageState.nowGraTime = targetValue;
// 設(shè)置對應(yīng)數(shù)據(jù)
initAqiChartData();
// 調(diào)用圖表渲染函數(shù)
renderChart();
}
}
if(flag == 1){
if (pageState.nowSelectCity !== targetValue) {
pageState.nowSelectCity = targetValue;
// 設(shè)置對應(yīng)數(shù)據(jù)
initAqiChartData();
// 調(diào)用圖表渲染函數(shù)
renderChart();
}
}
}
function graTimeChange(event) {
// 根據(jù)點(diǎn)擊的獲得的不同value值，進(jìn)行選擇執(zhí)行哪個case語句
var event = event||window.event;
var target = event.target||event.srcElement;
var selectValue = target.value;
switch(selectValue){
case "day":
showChange(flag,selectValue);
break;
case "week":
showChange(flag,selectValue);
break;
case "month":
showChange(flag,selectValue);
break;
}
}
/**
* select發(fā)生變化時的處理函數(shù)
*/
function citySelectChange() {
// 根據(jù)flag的值來確定，怎么樣執(zhí)行showChange()函數(shù)
var city = this.value;
showChange(1,city);
}
/**
* 初始化日、周、月的radio事件，將該各個radio的事件委托給父元素，只綁定一次事件
當(dāng)點(diǎn)擊時，調(diào)用函數(shù)graTimeChange，來確定變化時的處理函數(shù)
*/
function initGraTimeForm() {
addEventHandler(formGraTime,'click',graTimeChange);
}
/**
* 初始化城市Select下拉選擇框中的選項(xiàng)
*/
function initCitySelector() {
// 讀取aqiSourceData中的城市，然后設(shè)置id為city-select的下拉列表中的選項(xiàng)
var cityList = '';
for (var i in aqiSourceData) {
cityList += '<option>' + i +'</option>';
}
citySelect.innerHTML = cityList;
// 給select設(shè)置事件，當(dāng)選項(xiàng)發(fā)生變化時調(diào)用函數(shù)citySelectChange
addEventHandler(citySelect,'change',citySelectChange)
}
/**
* 初始化圖表需要的數(shù)據(jù)格式
*/
function initAqiChartData() {
// 將原始的源數(shù)據(jù)處理成圖表需要的數(shù)據(jù)格式,現(xiàn)在數(shù)據(jù)都在aqiSourceData[]中
// 處理好的數(shù)據(jù)存到 chartData 中
var nowCityData = aqiSourceData[pageState.nowSelectCity];
//nowCityData是確定的一個城市的92天降水?dāng)?shù)組，key是日期，nowCityData[key]是降水量
if (pageState.nowGraTime == 'day') {
chartData = nowCityData;
}
if (pageState.nowGraTime == 'week') {
chartData = {};
var countSum=0, daySum=0, week=0;
for (var item in nowCityData) {
countSum += nowCityData[item];
daySum ++;
if ((new Date(item)).getDay() == 6 ) {
week ++;
chartData['第'+week+'周'] = Math.floor(countSum/daySum);;
countSum = 0;
daySum = 0;
}
}
if (daySum!=0) {
week ++;
chartData['第'+week+'周'] = Math.floor(countSum/daySum);
}//保證最后一周若不滿也能算一周
}
if (pageState.nowGraTime == 'month') {
chartData = {};
var countSum=0, daySum=0, month=0;
for (var item in nowCityData) {
countSum += nowCityData[item];
daySum ++;
if ((new Date(item)).getMonth() !== month) {
month ++;
chartData['第'+month+'月'] = Math.floor(countSum/daySum);
countSum = 0
daySum = 0;
}
}
if (daySum != 0) {
month ++;
chartData['第'+month+'月'] = Math.floor(countSum/daySum);
}
}
}
/**
* 初始化函數(shù)
*/
function init() {
initGraTimeForm()
initCitySelector();
initAqiChartData();
renderChart();
}
init();四.實(shí)現(xiàn)效果圖
五。需要改進(jìn)的地方
（1）坐標(biāo)軸繪制出來
（2）可以嘗試實(shí)現(xiàn)立體效果
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼