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();

四.实现效果图

五。需要改进的地方

(1)坐标轴绘制出来

(2)可以尝试实现立体效果

时间: 2024-10-11 17:36:03

js实现不同城市空气质量报告显示柱形图的相关文章

国内空气质量数据开源了

经过半个月的使用和维护,总算有个稳定的版本,已开源在https://github.com/hzexe/openair 本项目可以获取中国环境检测总站的空气数据,也包含restful的数据分发服务 当前数据内容包括: 城市的实时空气数据,包括AQI.pm2.5.pm10.co.o3.no2.so2.首要污染物.生活建议.污染描述等数据 城市所有空气检测点(空气站)的实时空气质量,除包含上面城市所有的基本数据,还有检测点名称,经度纬度等信息 城市空气质量历史数据(2013年以来) 检测点空气质量历史

聚合数据Android SDK 空气质量查询演示示例

1.聚合SDK是聚合数据平台,为移动开发者提供的免费数据接口.使用前请先到聚合平台(http://www.juhe.cn/)注册,申请相关数据. 2.下载聚合数据SDK,将开发包里的juhe_sdk_v_1_1.jar拷贝到libs根目录下,将libJuheSDK_v_1_0.so拷贝到libs\armeabi目录下,如图: 3. 根据接口说明文档找到以下方法: Java代码   /** * 城市空气质量 * * @param city *            城市名称的中文名称或拼音,如:上

中国空气质量在线监测分析平台之JS加密、JS混淆处理

中国空气质量在线监测分析平台数据爬取分析 页面分析:确定url.请求方式.请求参数.响应数据 1.访问网站首页:https://www.aqistudy.cn/html/city_detail.html,通过抓包工具分析首页请求并没有获取到页面内的数据信息  2.因此可以确定页面内的数据是动态加载的,通过抓包工具捕获加密的响应对象, 3.加密响应对象是通过post请求携带加密的参数发起(2次). 4.综上分析可以确定,动态请求时在搜索按钮触发时发起的,因此通过火狐firefox浏览器分析页面搜索

python获取全国各个城市pm2.5、臭氧等空气质量

随着国家发展,中国很多城市的空气质量其实并不好,国家气象局会有实时统计,但是要去写爬虫爬取是十分麻烦的事情,并且官方网站也会做一些反爬虫措施,所以实现起来比较麻烦,最好的办法就是使用现成的免费接口,空气质量指数分析,这里是笔者自己实现的一个python调用方式,代码如下: # -*- coding: utf-8 -*- # flake8: noqa __author__ = 'wukong' import urllib from urllib import urlencode #配置您申请的ap

空气质量管理系统ssm(mybatis+spring+springMVC)框架+前后端分离

1.目录结构: 2.需要注意的地方 2.1在WEB-INFO下新建 2.1.1 springMVC-servlet.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instanc

用python+selenium获取北上广深成五地PM2.5数据信息并按空气质量排序

从http://www.pm25.com/shenzhen.html抓取北京,深圳,上海,广州,成都的pm2.5指数,并按照空气质量从优到差排序,保存在txt文档里 #coding=utf-8 from selenium import webdriver from time import sleep class PM: def __init__(self): self.dr = webdriver.Chrome() self.pm25_info = self.get_pm25_info() de

OneNET麒麟座应用开发之十:空气质量数据监测站项目总结

大气质量数据监测站用于测试空气质量监测及数据采集,实现野外或者室内空气质量的检测. 1.项目概述 本项目是一个定制项目,要求采集大气的压力.温度.湿度.PM25.位置等数据并上传到指定的后台服务器.但有时候因为没有条件或因为各种原因不能联网,则采用本地保存的方式,本地保存我们决定使用SD卡来实现.除此外,为了实现显式需求,还需要配套一些东西来实现饮食的需求,如实时时钟记录,上传联网方式的选择等. 2.硬件设计 本项目涉及到的硬件并不复杂,我们对其中几个实用比较多的电路做一个说明.首先说一下串口通

软件测试结果分析和质量报告

如同代码是程序员的成果之一,测试报告和质量报告是测试人员的主要成果之一.对于一个好的测试报告,是建立在正确的.足够的测试结果的基础之上,不仅要提供必要的测试结果的实际数据,同时要对结果进行分析,发现产品中问题的本质,对产品质量进行准确的评估. 1.缺陷分析 对缺陷进行分析,确定测试是否达到结束的标准,也就是判定测试是否已达到用户可接受的状态.在评估缺陷时应遵照缺陷分析策略中制定的分析标准,最常用的缺陷分析方法有: 缺陷分布报告,允许将缺陷计数作为一个或多个缺陷参数的函数来显示,生成缺陷数量与缺陷

空气质量监测接口演示代码

空气质量监测接口 空气质量监测可以查询到全国各地的空气质量情况,空气等级情况,以及空气城市排名情况等! 详情请参考:http://www.haoservice.com/docs/13 示例: {    "error_code": 0,    "reason": "成功",    "result": {        "Ranking": 83,        "CityName": &q