標籤：js 資料處理 直條圖
一,實現理論基礎
（1）首先使用pageState這個對象記錄當前頁面的選項，根據不同選項來切換資料顯示
（2）使用時期函數，隨機產生測試資料
（3）使用innerHTML給頁面即時添加渲染的內容圖表
（4）使用隨機數，產生隨機的不同顏色給橫條圖
（5）使用title屬性，來實現當滑鼠移動到某個層面上，顯示title內容的提示框
（6）使用事件代理將各個radio的變化事件函數，綁定到其父元素上
（7）使用new Date(item)).getDay() == 6來某一天是周幾，如果是6,就說明此時是日曆上的完整一周
（8）使用getMonth()來統計月份
最終獲得月平均量，周平均量，天平均量數值，通過直條圖顯示出來
二.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; }}// 以下兩個函數用於隨機類比產生測試資料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: "北京", nowGraTime: "day"}var flag = 0;//0，表示當前是通過改變時間，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+"平均空氣品質報告</div>";for (var item in chartData) {color = ‘#‘ + Math.floor(Math.random() * 0xFFFFFF).toString(16); text += ‘<div title="‘+item+":"+chartData[item]+‘" style="height:‘+chartData[item]+‘px; background-color:‘+color+‘"></div>‘; } aqiChartWrap.innerHTML = text;}/** radio，select變化時的處理函數 * 根據選擇的flag，以及targetValue值來確定進行切換顯示，flag=0表示是根據選擇 的日，周，月，進行切換，flag=1表示是根據選擇的城市來進行切換。 */ function showChange(flag,targetValue){ if(flag == 0){ if (pageState.nowGraTime !== targetValue) { pageState.nowGraTime = targetValue; // 設定對應資料 initAqiChartData(); // 調用圖表渲染函數 renderChart(); } } if(flag == 1){ if (pageState.nowSelectCity !== targetValue) { pageState.nowSelectCity = targetValue; // 設定對應資料 initAqiChartData(); // 調用圖表渲染函數 renderChart(); } } } function graTimeChange(event) { // 根據點擊的獲得的不同value值，進行選擇執行哪個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發生變化時的處理函數 */function citySelectChange() { // 根據flag的值來確定，怎麼樣執行showChange()函數 var city = this.value; showChange(1,city); }/** * 初始化日、周、月的radio事件，將該各個radio的事件委託給父元素，只綁定一次事件 當點擊時，調用函數graTimeChange，來確定變化時的處理函數 */function initGraTimeForm() { addEventHandler(formGraTime,‘click‘,graTimeChange); }/** * 初始化城市Select下拉選擇框中的選項 */function initCitySelector() { // 讀取aqiSourceData中的城市，然後設定id為city-select的下拉式清單中的選項 var cityList = ‘‘; for (var i in aqiSourceData) { cityList += ‘<option>‘ + i +‘</option>‘; } citySelect.innerHTML = cityList; // 給select設定事件，當選項發生變化時調用函數citySelectChange addEventHandler(citySelect,‘change‘,citySelectChange)}/** * 初始化圖表需要的資料格式 */function initAqiChartData() { // 將原始的來源資料處理成圖表需要的資料格式,現在資料都在aqiSourceData[]中 // 處理好的資料存到 chartData 中 var nowCityData = aqiSourceData[pageState.nowSelectCity]; //nowCityData是確定的一個城市的92天降水數組，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); } }}/** * 初始化函數 */function init() { initGraTimeForm() initCitySelector(); initAqiChartData(); renderChart();}init();
四.實現
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/84/31/wKioL1eITLLDsV5zAAHeNcxVe78720.jpg" title="1.jpg" alt="wKioL1eITLLDsV5zAAHeNcxVe78720.jpg" />650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/84/31/wKiom1eITMHRQt2ZAACTP8XNlUg028.jpg" title="2.jpg" alt="wKiom1eITMHRQt2ZAACTP8XNlUg028.jpg" />650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/84/31/wKioL1eITM3T-S7QAAB9ygRu1P8626.jpg" title="3.jpg" alt="wKioL1eITM3T-S7QAAB9ygRu1P8626.jpg" />五。需要改進的地方
（1）座標軸繪製出來
（2）可以嘗試實現立體效果
本文出自 “夢想需要堅持” 部落格，請務必保留此出處http://xiyin001.blog.51cto.com/9831864/1826615
js實現不同城市空氣品質報告顯示直條圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
