标签：
task17.html
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> <style> #aqi-chart-wrap{ width:90%; height:500px; display: flex; justify-content: center; align-content: center; align-items: flex-end; margin:10px auto; } .div{ display:inline-block; width:20px; margin-left:3px; } </style> </head> <body> <fieldset id="form-gra-time"> <legend>请选择日期粒度：</legend> <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> </fieldset> <fieldset> <legend>请选择查看的城市：</legend> <select id="city-select"> </select> </fieldset> <div id="aqi-chart-wrap"> // 柱状图显示区
</div> <script src="task17.js"> </script> </body> </html>
task17.js
/* 数据格式演示 var aqiSourceData = { "北京": { "2016-01-01": 10, "2016-01-02": 10, "2016-01-03": 10, "2016-01-04": 10 } };*/ // 以下两个函数用于随机模拟生成测试数据 function getDateStr(dat) { var y = dat.getFullYear(); //返回表示当前年份的四位数字 var m = dat.getMonth() + 1; //getMonth（）返回0-11的数来表示当前月份 m = m < 10 ? ‘0‘ + m : m; var d = dat.getDate(); //返回月份中的某一天，1-31之间的数 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", width:20 } var aqiChartWrap=document.getElementById("aqi-chart-wrap"), formGraTime=document.getElementById("form-gra-time"), citySelect=document.getElementById("city-select"); /* 渲染图表 */ function renderChart() { var content=" "; for(var item in chartData){ var bg="#" + Math.random().toString(16).substring(2, 8); //得到背景的随机颜色 content+=‘<div class="div"style="height:‘+chartData[item]+‘px;width:‘+pageState.width+‘px;background-color:‘+bg+‘;"‘+‘title="‘+item+‘ 空气质量指数：‘+chartData[item]+‘">‘+ ‘</div>‘; } aqiChartWrap.innerHTML=content; } /** * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange */ function initGraTimeForm() { formGraTime.addEventListener("click",graTimeChange); } /** * 日、周、月的radio事件点击时的处理函数 */ function graTimeChange() { // 确定是否选项发生了变化 var input=document.getElementsByTagName("input"); for(var i=0;i<input.length;i++){ if(input[i].checked){ //确定选中的粒度 pageState.nowGraTime=input[i].value; // 设置对应数据 } } initAqiChartData(); // 调用图表渲染函数 } /** * 初始化城市Select下拉选择框中的选项 */ function initCitySelector() { // 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项 var content=" "; for(var city in aqiSourceData ){ content+=‘<option value="‘+city+‘" >‘+city+‘</option>‘; } citySelect.innerHTML=content; // 给select设置事件，当选项发生变化时调用函数citySelectChange citySelect.addEventListener("change",citySelectChange); } /** * select发生变化时的处理函数 */ function citySelectChange() { var options=document.getElementsByTagName("option"); for(var i=0;i<options.length;i++){ if(options[i].selected){ // 确定被选中的城市 pageState.nowSelectCity=options[i].value; // 设置对应数据 } } initAqiChartData(); // 调用原始数据处理函数 } /** * 初始化图表需要的数据格式 */ function initAqiChartData() { //将选中城市的数据先放在chart中 var chart=aqiSourceData[pageState.nowSelectCity]; switch(pageState.nowGraTime){ //根据选择的粒度计算数据并保存至chartData case "day":{ chartData={}; chartData=chart; pageState.width=10; //设置每个显示出来的柱子的宽度 break; } case "week":{ chartData={}; var sum=0,i=0,week=0; for(var item in chart){ sum+=chart[item]; i++; if(new Date(item).getDay()==6) { week++; chartData[‘2016年第‘+week+‘周‘]=Math.round(sum/i); sum=0;i=0; } } if(sum!=0){ week++; chartData[‘2016年第‘+week+‘周‘]=Math.round(sum/i); } pageState.width=100; break; } case "month":{ chartData={}; var sum=0,i=0,month=0; for(var item in chart){ sum+=chart[item]; i++; if((new Date(item)).getMonth()!=month) { month++; chartData[‘2016年‘+month+‘月‘]=Math.round(sum/i); sum=0;i=0; } } if(sum!=0){ month++; chartData[‘2016年‘+month+‘月‘]=Math.round(sum/i); } pageState.width=300; break; } } renderChart(); //调用图表渲染函数 } /** * 初始化函数 */ function init() { initGraTimeForm() initCitySelector(); initAqiChartData(); renderChart(); } init();
（1）title属性：
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
（2）onchange事件在数据变化时才会发生
为了得到用户选择查看的城市并处理对应数据，给select设置事件，当选项发生变化时调用函数citySelectChange，修改pageState.nowSelectCity（记录当前页面表单的城市选项）的值，由于题目中给的pageState.nowSelectCity:-1;与后续的数据处理函数没有绑定，所以页面被打开时并不会渲染柱状图，又因为这里用到onchange事件监听选项变化，而onchange事件必须在数据有变化的时候才会发生，所以一开始默认选择的是北京，接着再点北京是不会触发事件的，必须先点其他城市，再点回北京才会出现柱状图，这里有两种方法避免这种情况：
A、将pageState.nowSelectCity 最初默认值设置为“北京”，这样页面打开时就会呈现北京市的柱状图，之后选择其他的城市，onchange事件就会发生。
B、在北京前面加一个option，选项名可以为“城市名”，之后用户无论选择什么城市，都会触发事件渲染图表；
支持onchange事件的 HTML 标签：
<input type="text">, <select>, <textarea>
支持onchange事件的 JavaScript 对象：
select, text, textarea，fileUpload（FileUpload 控件显示一个文本框控件和一个浏览按钮，使用户可以选择客户端上的文件并将它上载到 Web 服务器。）
（3）自然周/月
题目中要求用户选择 “周” 时要以自然周（周一到周日）为粒度，开始做的方法是从第一个数据开始，每7个数据求一个平均数，后来发现第一个数据也就是2016-01-01并不一定是一周的第一天，所以这种方法行不通。具体可行的方法如下：
将所有的日期放在一个新的Date对象中，之后利用getDay()方法，该方法返回值是 0（周日） 到 6（周六） 之间的一个整数，所以当new Date.getDay()=6时就意味着一个自然周结束了，所以将每次new Date.getDay()=6之前的<=7个数据求平均即可，同时只要最后的求和！=0就说明最后一组不到7个数据，也应该求平均值。
“月”要以自然月为粒度做法和上面类似，利用getMonth()方法，该方法返回值是 0（一月） 到 11（十二月） 之间的一个整数。
标签：
原文地址：http://www.cnblogs.com/cjlalala/p/5837976.html
