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

给了一组数据，是各个城市的每天的空气质量数值类似：
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

浏览效果立即下载

TAG:图表基础教程

本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：爱思资源网 http://www.aseoe.com/show-10-916-1.html

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

[前端插件推荐] Plugin