Edit in JSFiddle

/* 数据格式演示
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;
  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,//??? why number?
  nowGraTime: "day"
}

/**
 * 渲染图表
 */
function renderChart() {
  var wrap = document.getElementsByClassName("aqi-chart-wrap")[0];
  wrap.innerHTML = "";
  var className = pageState.nowGraTime.toLowerCase();

  console.log(chartData)
  var div = null;
  for(var t in chartData){
    var data = chartData[t];

    var aqiCondition = "";
    if(data > 400){
      aqiCondition = "very-serious";
    }
    else if(data > 300){
      aqiCondition = "serious";
    }
    else if(data > 200){
      aqiCondition = "not-bad";
    }
    else if(data > 100){
      aqiCondition = "good";
    }
    else {   
      aqiCondition = "very-good";
    }
    
    div = document.createElement("div");
    div.title = t + ': ' + data;
    div.className = className + ' ' + aqiCondition;
    div.style = "height: " + (parseInt(data) * 2) + "px;";
    wrap.appendChild(div);
  }
}

/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange() {
  var radioInputs = document.getElementById("form-gra-time").getElementsByTagName("input");
  for(var i = 0; i < radioInputs.length; i++){
    // 确定是否选项发生了变化 
    // imo: 其实调用本函数的时候利用 change 事件已经判读过了 OAO
    if(radioInputs[i].checked && radioInputs[i].value !== pageState.nowGraTime){
      // 设置对应数据
      pageState.nowGraTime = radioInputs[i].value;

      // 调用图表渲染函数
      initAqiChartData();
      renderChart();

      return true;
    }
  }
  return false;
}

/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
  var citySlt = document.getElementById("city-select");
  // 确定是否选项发生了变化 
  // imo: 其实调用本函数的时候利用 change 事件已经判读过了 OAO
  if(citySlt.value !== pageState.nowSelectCity){
    // 设置对应数据
    pageState.nowSelectCity = citySlt.value;
    console.log("pageState.nowSelectCity: "+citySlt.value)

    // 调用图表渲染函数
    initAqiChartData();
    renderChart();

    return true;
  }
  
  return false;
}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数 graTimeChange
 */
function initGraTimeForm() {
  var radioInputs = document.getElementById("form-gra-time").getElementsByTagName("input");
  for(var i = 0; i < radioInputs.length; i++){
    radioInputs[i].addEventListener("change", function(){
      graTimeChange();
      console.log("radio changed!");
    }, false);
  }
}

/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
  // 读取 aqiSourceData 中的城市，然后设置 id 为 city-select 的下拉列表中的选项
  var citySlt = document.getElementById("city-select");
  var cityOpt = null;
  for(var cityName in aqiSourceData){
    cityOpt = document.createElement("option");
    cityOpt.innerHTML = cityName;
    citySlt.appendChild(cityOpt);
  }

  // 给select设置事件，当选项发生变化时调用函数citySelectChange
  citySlt.addEventListener("change", function(){
    citySelectChange();
    console.log("slt changed!");
  }, false);
}

/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
  // 将原始的源数据处理成图表需要的数据格式
  // 处理好的数据存到 chartData 中
  chartData = {};

  var cityData = aqiSourceData[pageState.nowSelectCity];
  //console.log(cityData)
  var t = pageState.nowGraTime;

  function saveAvg(name, dataArr){
    if(dataArr.length === 0) return false;// !!! // For the very first piece of data
    chartData[name] = (dataArr.reduce(function(a, b){
      return a + b;
    }, 0) / dataArr.length).toFixed(2);
  }

  if(t.toLowerCase() === "day"){
    chartData = cityData;
    console.log("chartData changing...")
  }
  else if(t.toLowerCase() === "week"){
    var weekVal = [];
    var weekName = "";
    var day = "";

    function getWeekName(day){
      var weekName = "";
      if(!new Date(day).getDay()){
        weekName = "this week's Sun: " + day;
      }
      else {
        weekName = "this week's end: " + day;
      }
      return weekName;
    }

    for(day in cityData){
      weekVal.push(cityData[day]);
      if(!new Date(day).getDay()){// If meets Sunday,(week here begins with Mon & ends with Sun)
        weekName = getWeekName(day);
        saveAvg(weekName, weekVal);        
        weekVal = [];// initialize the week.
      }
    }
    if(weekVal.length > 0){// considering the week has no Sunday
      weekName = getWeekName(day);
      saveAvg(weekName, weekVal);
    }
  }
  else if(t.toLowerCase() === "month"){
    var monthVal = [];
    var monthName = "";
    var day = "";
    //var MONTH = []

    function getLastMonthName(day){
      var monthName = "";
      if(new Date(day).getDate() === 1){
        var thisMonth = new Date(day).getMonth();
        monthName = new Date(new Date(day).setMonth(thisMonth - 1))
                    .toDateString().replace(/\w+\s(\w+)\s\d{1,2}\s(\d{4})/, "$2 $1");//.slice(4, 7);
      }
      else {
        monthName = new Date(day).toDateString().replace(/\w+\s(\w+)\s\d{1,2}\s(\d{4})/, "$2 $1");//.slice(4, 7);
      }
      return monthName;
    }

    for(day in cityData){
      if(new Date(day).getDate() === 1){// If meets the first day of a month,
        monthName = getLastMonthName(day);
        saveAvg(monthName, monthVal);
        monthVal = [];// initialize the month.
      }
      monthVal.push(cityData[day]);
    }
    if(monthVal.length > 0){// last several days in last month
      monthName = getLastMonthName(day);
      saveAvg(monthName, monthVal);
    }
  }
}

/**
 * 初始化函数
 */
function init() {
  initGraTimeForm()
  initCitySelector();
  initAqiChartData();
}

//window.onload = function(){
  init();  
//};

<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">
    <!-- <option>北京</option> -->
  </select>
</fieldset>

<div class="aqi-chart-wrap">
  请选择选项来生成图表OvO
</div>

body {
  min-width: 800px;
}
.aqi-chart-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  /*flex-direction: row;
  flex-wrap: nowrap;*/
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-end;
  background-color: #ddd;
  color: #555;
  text-align: center;
}
.aqi-chart-wrap div {
  border: 1px solid #000;
  border-bottom: none;
  /*height: 200px;*/
  /*background-color: pink;*/
}
.aqi-chart-wrap .day {
  min-width: 5px;
  max-width: 10px;
}
.aqi-chart-wrap .week {
  min-width: 25px;
  max-width: 30px;
}
.aqi-chart-wrap .month {
  min-width: 60px;
  max-width: 70px;
}
.aqi-chart-wrap .very-good {
  background-color: hsla(120, 100%, 80%,1);
}
.aqi-chart-wrap .good {
  background-color: hsla(60, 90%, 70%,1);
}
.aqi-chart-wrap .not-bad {
  background-color: hsla(40, 80%, 60%,1);
}
.aqi-chart-wrap .serious {
  background-color: hsla(20, 70%, 50%,1);
}
.aqi-chart-wrap .very-serious {
  background-color: hsla(0, 60%, 40%,1);
}