【实用】前端开发工具图表_数据变图表

javaweb开发前端实例|网站前端开发|前端开发和javascript

数据:各个城市的每天的空气质量数值
类似:

var aqiSourceData = {
“北京”:{
2018.05.12:126,
2018.05.13:126,
2018.05.14:126,
2018.05.15:126,
},
“上海”:{
2018.05.12:126,
2018.05.13:126,
2018.05.14:126,
2018.05.15:126,
}
}

要求
1、根据天、周、月来展示图表
2、求出周、月的平均数,并进行展示
3、可以切换城市

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>选择联动</title>
<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:0auto;
margin-top:100px;
text-align:center;
}
</style>
</head>
<body>
<fieldsetid=”form-gra-time”>
<legend>javascript 前端开发:请选择日期粒度:</legend>
<label>日
<inputname=”gra-time” value=”day” type=”radio” checked=”checked”>
</label>
<label>周
<inputname=”gra-time” value=”week” type=”radio”>
</label>
<label>月
<inputname=”gra-time” value=”month” type=”radio”>
</label>
</fieldset>
<fieldset>
<legend>请选择查看的城市:</legend>
<selectid=”city-select”></select>
</fieldset>
<divclass=”aqi-chart-wrap” id=”aqi-chart-wrap”></div>
<script type=”text/javascript”>
functiongetDateStr(dat){
vary=dat.getFullYear();
varm=dat.getMonth() +1;
m=m<10?’0’+m:m;
vard=dat.getDate();
d=d<10?’0’+d:d;
returny+’-‘+m+’-‘+d;
}
functionrandomBuildData(seed){
varreturnData={};
vardat=newDate(“2016-01-01”);
vardatStr=”
for (vari=1;i<92;i++) {
datStr=getDateStr(dat);
returnData[datStr] =Math.ceil(Math.random() *seed);
dat.setDate(dat.getDate() +1);
}
returnreturnData;
}
varaqiSourceData={
“北京”:randomBuildData(500),
“上海”:randomBuildData(300),
“广州”:randomBuildData(200),
“深圳”:randomBuildData(100),
“成都”:randomBuildData(300),
“西安”:randomBuildData(500),
“福州”:randomBuildData(100),
“厦门”:randomBuildData(100),
“沈阳”:randomBuildData(500)
};
// 用于渲染图表的数据
varchartData={};
// 记录当前页面的表单选项
varpageState={
nowSelectCity: “深圳”,
nowGraTime: “day”
}
/**
* 渲染图表
*/
functionrenderChart(){
chartData.dataAll= [];
chartData.data = [];
for (vareinaqiSourceData[pageState.nowSelectCity]) {//aqiSourceData[pageState.nowSelectCity]当前选择的城市数据
varflagArr= [];
chartData.dataAll.push(aqiSourceData[pageState.nowSelectCity][e]);
}
vardataLength=chartData.dataAll.length;
varnum=0;
switch (pageState.nowGraTime) {
case”day”:
chartData.data =chartData.dataAll;
break;
case”week”:
for (vari=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 (vari=0;i<=dataLength;i++) {
num=num+chartData.dataAll[i];
if (i%30==29) {//第29次的时候追加
chartData.data.push(Math.round(num/30));
num=0;
}
}
break;
}
//柱状图的颜色
varcolorArr= [“#e4ba10″,”#e47910″,”#e43d10″,”#106ae4″,”#106ae4″,”#10e465″,”#10e41a”,”#790073″,
“#deff00″,”#00ff60″,”#02c44b”,”#176e38″
];
//柱状标签
varhtml=”;
varcontenthtml='<div class=”zhu ‘+pageState.nowGraTime+
‘” style=”height:{height};background:{color}”></div>’;
for (vari=0;i<chartData[“data”].length;i++) {
//生成一个随机数,来获取数组的元素
vartimer=Math.round(Math.random() * (colorArr.length -1));
html+=contenthtml.replace(“{height}”,parseInt(chartData[“data”][i]) +’px’).replace(“{color}”,
colorArr[timer]);
}
varapicontent=document.getElementById(“aqi-chart-wrap”);
apicontent.innerHTML=html;
}
/**
* 日、周、月的radio事件点击时的处理函数
*/
functiongraTimeChange(data){
// 确定是否选项发生了变化
if (pageState.nowGraTime==data) {
returnfalse;
}
pageState.nowGraTime=data;
// 调用图表渲染函数
renderChart();
}
/**
* select发生变化时的处理函数
*/
functioncitySelectChange(city){
// 确定是否选项发生了变化
if (pageState.nowSelectCity==city) {
returnfalse;
}
// 设置对应数据
pageState.nowSelectCity=city;
// 调用图表渲染函数
renderChart();
}
/**
* 初始化日、周、月的radio事件,当点击时,调用函数graTimeChange
*/
functioninitGraTimeForm(){
varformTime=document.getElementById(“form-gra-time”);
varinputRadio=formTime.getElementsByTagName(‘input’);
//循环绑定 第一种取值方法
for (vari=0;i<inputRadio.length;i++) {
inputRadio[i].addEventListener(‘click’,function(){
graTimeChange(this.value);
})
}
}
/**
* 初始化城市Select下拉选择框中的选项
*/
functioninitCitySelector(){
// 读取aqiSourceData中的城市,然后设置id为city-select的下拉列表中的选项
varcitySelect=document.getElementById(“city-select”);
for (vareinaqiSourceData) {
varoption=document.createElement(“option”);
option.innerHTML=option.value =e;
citySelect.appendChild(option);
}
// 给select设置事件,当选项发生变化时调用函数citySelectChange
citySelect.onchange=function(){
//selectedIndex 获取option 是第几个 value 具体的值
citySelectChange(this.value)
}
}
/**
* 初始化图表需要的数据格式
*/
functioninitAqiChartData(){
// 将原始的源数据处理成图表需要的数据格式
// 处理好的数据存到 chartData 中
varformTime=document.getElementById(“form-gra-time”);
varinputRadio=formTime.getElementsByTagName(‘input’);
for (vari=0;i<inputRadio.length;i++) {
if (inputRadio[i].value ==pageState.nowGraTime) {
inputRadio[i].checked =true;
}
}
varcitySelect=document.getElementById(“city-select”);
citySelect.value =pageState.nowSelectCity;
renderChart();
}
/**
* 初始化函数
*/
functioninit(){
initGraTimeForm()
initCitySelector();
initAqiChartData();
}
init();
</script>
</body>
</html>

php javascript 前端开发|web前端开发还是javascript?|javascript前端开发实用技术教程

» 本文来自:前端开发者 » 《【实用】前端开发工具图表_数据变图表》
» 本文链接地址:https://www.rokub.com/3570.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!