数据变图表,js基础教程,超实用

导语 给了一组数据,是各个城市的每天的空气质量数值类似:var aqiSourceData = { "北京":{ 2016 03 12:126, 2016 03 13:126, 2016 03 14:126, 2016 03 15:126,}, "上海":{ 2016 03 12:126, 2016 0
给了一组数据,是各个城市的每天的空气质量数值 类似:
var aqiSourceData = {
   "北京":{
   2016.03.12:126,
   2016.03.13:126,
   2016.03.14:126,
   2016.03.15:126,
},
   "上海":{
   2016.03.12:126,
   2016.03.13:126,
   2016.03.14:126,
   2016.03.15:126,
}
}
要求
1、根据天、周、月来展示图表
2、求出周、月的平均数,并进行展示
3、可以切换城市
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< >选择联动</ >
<style>
.zhu {
width: 10px;
display: inline-block;
vertical-align: bottom;
 
}
.day {
width: 10px;
}
.week {
width: 50px;
}
.month {
width: 100px;
}
    .aqi-chart-wrap {
      width: 1000px;
      margin: 0 auto;
      margin-top: 100px;
      text-align: center;
    }
</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 class="aqi-chart-wrap" id="aqi-chart-wrap"></div>
 
< type="text/ ">
 
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"
}
/**
 * 渲染图表
 */
function renderChart() {
chartData.dataAll = [];
chartData.data = [];
for(var e in aqiSourceData[pageState.nowSelectCity]){//aqiSourceData[pageState.nowSelectCity]当前选择的城市数据
var flagArr = [];
   chartData.dataAll.push(aqiSourceData[pageState.nowSelectCity][e]);
   }
   var dataLength = chartData.dataAll.length;
   var num = 0;
   switch(pageState.nowGraTime){
   case "day":
   chartData.data = chartData.dataAll;
   break;
   case "week":
   for(var i=0;i<= dataLength;i++){
   num=num+chartData.dataAll[i];
   if(i%7==6){//第七次的时候追加
   chartData.data.push(Math.round(num/7));
   num = 0;
   }
   }
   break;
   case "month":
   for(var i=0;i<= dataLength;i++){
   num=num+chartData.dataAll[i];
   if(i%30==29){//第29次的时候追加
   chartData.data.push(Math.round(num/30));
   num = 0;
   }
   }
   break;
   }
//柱状图的颜色
var colorArr = ["#e4ba10","#e47910","#e43d10","#106ae4","#106ae4","#10e465","#10e41a","#790073","#deff00","#00ff60","#02c44b","#176e38"];
//柱状标签
var html ='';
var contenthtml = '<div class="zhu '+pageState.nowGraTime+'" style="height:{height};background:{color}"></div>';
for(var i=0;i<chartData["data"].length;i++){
//生成一个随机数,来获取数组的元素
var timer = Math.round(Math.random()*(colorArr.length-1));
html+=contenthtml.replace("{height}",parseInt(chartData["data"][i])+'px').replace("{color}",colorArr[timer]);
}
var apicontent = document.getElementById("aqi-chart-wrap");
apicontent.innerHTML = html;
}
/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange(data) {
  // 确定是否选项发生了变化
  if(pageState.nowGraTime==data){return false;}
 
  pageState.nowGraTime = data;
  // 调用图表渲染函数
  renderChart();
}
 
/**
 * select发生变化时的处理函数
 */
function citySelectChange(city) {
  // 确定是否选项发生了变化
  if(pageState.nowSelectCity==city){return false;}
  // 设置对应数据
   pageState.nowSelectCity = city;
  // 调用图表渲染函数
   renderChart();
}
 
/**
 * 初始化日、周、月的radio事件,当点击时,调用函数graTimeChange
 */
function initGraTimeForm() {
var formTime = document.getElementById("form-gra-time");
var inputRadio = formTime.getElementsByTagName('input');
//循环绑定 第一种取值方法
for(var i=0;i<inputRadio.length;i++){
inputRadio[i].addEventListener('click',function(){
graTimeChange(this.value);
})
}
}
/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
  // 读取aqiSourceData中的城市,然后设置id为city-select的下拉列表中的选项
  var citySelect = document.getElementById("city-select");
  for(var e in aqiSourceData){
   var option = document.createElement("option");
   option.innerHTML= option.value = e;
 
   citySelect.appendChild(option);
  }
  // 给select设置事件,当选项发生变化时调用函数citySelectChange
  citySelect. = function(){
   //selectedIndex 获取option 是第几个 value 具体的值
   citySelectChange(this.value)
  }
}
/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
  // 将原始的源数据处理成图表需要的数据格式
  // 处理好的数据存到 chartData 中
  var formTime = document.getElementById("form-gra-time");
  var inputRadio = formTime.getElementsByTagName('input');
  for(var i=0;i<inputRadio.length;i++){
   if(inputRadio[i].value==pageState.nowGraTime){
   inputRadio[i].checked = true;
   }
  }
   var citySelect = document.getElementById("city-select");
   citySelect.value = pageState.nowSelectCity;
   renderChart();
}
 
/**
 * 初始化函数
 */
function init() {
  initGraTimeForm()
  initCitySelector();
  initAqiChartData();
}
 
init();
</ >
</body>
</html>
手机QQ扫一扫加web前端学习部落22群,群文件分享,技术交流
海量前端学习资料库,请添加群120342833

 
http://www.aseoe.com/ true 数据变图表,js基础教程,超实用 http://www.aseoe.com/show-10-916-1.html report 4952.5 给了一组数据,是各个城市的每天的空气质量数值类似:var aqiSourceData = { "北京":{ 2016 03 12:126, 2016 03 13:126, 2016 03 14:126, 2016 03 15:126,}, "上海":{ 2016 03 12:126, 2016 0
TAG:图表 基础 教程
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-10-916-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)