交互效果说明:
模拟一个柱状图图表,横轴是时间,纵轴是空气质量指数,天、周、月的数据只根据用户的选择显示一种。
目前数据:2016-01-01~2016-04-03
用户可以选择查看不同的时间粒度,以选择要查看的空气质量指数是以天为粒度还是以周或月为粒度
天:显示每天的空气质量指数
周:以自然周(周一到周日)为粒度,统计一周7天的平均数为这一周的空气质量数值,
如果数据中缺少一个自然周的几天,则按剩余天进行计算
月:以自然月为粒度,统一一个月所有天的平均数为这一个月的空气质量数值
用户可以通过select切换城市
鼠标移动到柱状图的某个柱子时,用title属性提示这个柱子的具体日期和数据
任务十七
-
任务说明:
- 任务描述:
- 参考以下示例代码,原始数据包含几个城市的空气质量指数数据
- √ 用户可以选择查看不同的时间粒度,以选择要查看的空气质量指数是以天为粒度还是以周或月为粒度
- √ 天:显示每天的空气质量指数
- √ 周:以自然周(周一到周日)为粒度,统计一周7天的平均数为这一周的空气质量数值,
√ 如果数据中缺少一个自然周的几天,则按剩余天进行计算
- √ 月:以自然月为粒度,统一一个月所有天的平均数为这一个月的空气质量数值
- √ 用户可以通过select切换城市
- √ 通过在"aqi-chart-wrap"里添加DOM,来模拟一个柱状图图表,
横轴是时间,纵轴是空气质量指数,
天、周、月的数据只根据用户的选择显示一种。
-
√ 天:每天的数据是一个很细的矩形
√ 周:每周的数据是一个矩形
√ 月:每周的数据是一个很粗的矩形
- √ 鼠标移动到柱状图的某个柱子时,用title属性提示这个柱子的具体日期和数据
- 任务注意事项:
- 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 任务目的:
- √ 接触更加复杂的表单对象
- √ 实现页面上的一个完整交互功能
- √ 用DOM实现一个柱状图图表
- 验收标准:笔记记录, 效果实现
- 完成验收:笔记 ,设计稿效果达成——在上面任务注意事项里面打钩