Home > Developer > Web Develop
First, the realization of theoretical basis
(1) First Use Pagestate this object to record the current page options, according to different options to switch data display
(2) Using time function, randomly generate test data
(3) Use innerHTML to add rendered content charts to the page in real time
(4) using random numbers to generate random colors to the bar chart
(5) Use the Title property to implement a cue box that displays the title content when the mouse moves to a certain level
(6) Use event Broker to bind the variable event function of each radio to its parent element
(7) Use new Date (item). GetDay () = = 6来 A day is a week, if it is 6, this is the calendar of the full week
(8) Use GetMonth () to count the months
Finally, the average monthly, weekly, and balance mean values are displayed through a column chart.
Two. HTML code
<body> <fieldset id= "Form-gra-time" > <legend> Please select a date granularity and city: </legend> <span id= > Please select date granularity:</span> <label> <input name= "Gra-time" value= "Day" type= "Radio" checked= "checked" ></label> <label> Week <input name= "Gra-time" value= "Week" type= "Radio" ></label> <label > Month <input name= "gra-time" value= "month" type= "Radio" ></label> <span id= "City" > Please select a town: </span> <select id= "City-select" value= "City" > <option> Beijing </option > </select> </fieldset> <div class= "Aqi-chart-wRap "> </div> <script src=" Task17 (2). js "></script></body>
Three. js Code
Cross-browser event bindings 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; }}// The following two functions are used for random simulation to generate test data 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 = &NBSP;GETDATESTR (DAT); returndata[datstr] = math.ceil (Math.random () * seed); dat.setdate (Dat.getdate () + 1); } return returndata;} var aqisourcedata = { "Beijing": randombuilddata ($), "Shanghai": Randombuilddata (+), "Guangzhou": randombuilddata (, ) "Shenzhen": randombuilddata (100), "Chengdu": randombuilddata (, ) "Xi ' an": randombuilddata (+), "Fuzhou": randombuilddata (+), "Xiamen": randombuiLddata (+), "Shenyang": randombuilddata (+)};// data for rendering charts var chartdata = {};// Record the current page's form options var pagestate = { nowselectcity: "Beijing", nowgratime: "Day"}var flag = 0;//0, which indicates that the current is by changing the time, 1. Change the city var formgratime = document.getElementById (' Form-gra-time '); Var cityselect = document.getelementbyid (' City-select ') ); Var aqichartwrap = document.getelementsbyclassname (' Aqi-chart-wrap ') [0];/** * rendering chart */function renderchart () {var color = ',text = '; text += "<div class= ' title ' >" + pageState.nowSelectCity + "City January-March" + pagestate.nowgratime+ "Average air quality report </div>";for (var item in chartdata) {color = ' # ' + math.floor (Math.random () * 0xffffff). ToString (+); text += ' <div title= "' +item+": "+chartdata[item]+ '" style= "Height: ' +chartdata[item]+ ' Px; background-color: ' +color+ ' ></div> '; } aqichartwrap.innerhtml = text;} /** radio,select changes the processing function * according to the selected flag, as well as Targetvalue value to determine the switching display, flag=0 is based on the selection day, week, month, To switch, flag=1 indicates that the switch is based on the selected city. */ function showchange (flag,targetvalue) { if (flag == 0) { if (Pagestate.nowgratime !== targetvalue) { pageState.nowGraTime = targetValue; // set corresponding data initaqichartdata (); // Call chart render function renderchart (); } } if (flag == 1) { if (pagestate. Nowselectcity !== targetvalue) { pagestate.nowselectcity = targetvalue; // setting the corresponding data initaqichartdata (); // Call chart render function renderchart (); } } } function Gratimechange (Event) { // Choose which case statement to execute based on the different value values obtained from the click 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 processing function When a change occurs */function cityselectchange () { According to the value of the flag, how to perform the Showchange () function var city = this.value; showchange (1,city); }/** * initializes the day, week, and month radio events, delegates the individual radio events to the parent element, binds only one event When clicked, call function Gratimechange to determine the processing function when changing */function initgratimeform () { addEventHandler (Formgratime, ' click ', Gratimechange); }/** * initialize the options in the City Select dropdown box */ Function initcityselector () { // read the city in Aqisourcedata, and then set the option in the drop-down list with ID City-select var cityList = '; for (var i in aqisourcedata) { cityList += ' <option> ' + i + ' </option> '; } citySelect.innerHTML = cityList; // Set events for SELECT, Call function Cityselectchange addeventhandler (cityselect, ' Change ', Cityselectchange) when the selected item changes}/** * The data format required for initializing the chart */function initaqichartdata () { // data format that the original source is processed into the chart, Data is now in aqisourcedata[] // processed data is stored in chartData var nowCityData = aqisourcedata[pagestate.nowselectcity]; //nowcitydata is a 92-day rainfall array that determines the city, key is the date, Nowcitydata[key ] is the precipitation 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+ ' Week '] = math.floor (countSum/daySum); countSum = 0; daySum = 0; } } if (daysum!=0) { week ++; chartdata[' +week+ ' Week '] = math.floor (countsum/daysum); }// Make sure the last week is a week if you're dissatisfied &NBSP;&NBSP;}&NBsp; 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+ ' month '] = math.floor (countsum/daysum); countsum = 0 daysum = 0; } } if (daysum != 0) { month ++; chartdata[' +month+ ' month '] = math.floor (countsum/daysum); } }}/** * initialization function */function init () { initgratimeform () initcityselector (); initaqichartdata (); renderchart ();} Init ();
Four. Implement
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/84/31/wKioL1eITLLDsV5zAAHeNcxVe78720.jpg "title=" 1.jpg " alt= "Wkiol1eitlldsv5zaahencxve78720.jpg"/>650) this.width=650; src= http://s3.51cto.com/wyfs02/M02/84/31/ Wkiom1eitmhrqt2zaactp8xnlug028.jpg "title=" 2.jpg "alt=" wkiom1eitmhrqt2zaactp8xnlug028.jpg "/>650) this.width= 650; "Src=" http://s4.51cto.com/wyfs02/M02/84/31/wKioL1eITM3T-S7QAAB9ygRu1P8626.jpg "title=" 3.jpg "alt=" Wkiol1eitm3t-s7qaab9ygru1p8626.jpg "/> Five. Areas needing improvement
(1) The axes are drawn.
(2) can try to achieve stereo effect
This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1826615
JS to achieve different City Air Quality report display column chart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
