《物联网web应用技术》课件 项目五 任务四家庭用电统计界面编写_第1页
《物联网web应用技术》课件 项目五 任务四家庭用电统计界面编写_第2页
《物联网web应用技术》课件 项目五 任务四家庭用电统计界面编写_第3页
《物联网web应用技术》课件 项目五 任务四家庭用电统计界面编写_第4页
《物联网web应用技术》课件 项目五 任务四家庭用电统计界面编写_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《Web应用技术》物联网Web应用技术项目五

Web开发框架任务四

家庭用电统计界面编写回顾jQuery安装jQuery语法jQuery选择器jQuery事件2.如何创建饼状图表?1.如何创建柱形图表？任务引入任务描述:家庭用电统计界面设计与程序编写任务教学目标：了解Web图表库的原理掌握Highcharts图表库的基本使用掌握ECharts图表库的基本使用任务概要教学内容

Web图表库简介

HighCharts使用

ECharts使用

家庭用电统计界面设计一二三四Web图表库简介知识点一项目实施中，通过可视图表能够充分的获取数据、可视化数据和分析数据，能很大程度上帮助决策者了解数据产生的深层次原因，以便据此做出正确的决定。通过一些JavaScript的图表库会使前端的数据可视化变得更加容易，轻松将数据转化为易于理解的图表。常见图表有：AmCharts、FusionCharts、Chart.JS、HighCharts、GoogleCharts等图表。Web图表库Web图表库（一）AmChartsAmCharts在满足每个数据可视化需求方面非常彻底。该库拥有大量示例展示的功能，涵盖了许多图形类型和自定义。AmCharts显着特点：现代化的图形设计。广泛的文档，附带知识库、技巧和提示。能够导出到Excel或PDF文档。移动端适配工具提示和注释。（一）AmChartsAmCharts提供在线编辑器，可即时预配置图表，允许使用自己的数据填充实时数据表。AmCharts图表库是非开源图表库，仍然可以免费使用，并在图表的左上角突出显示一个小链接。（二）FusionChartsFusionCharts提供一个免费的试用版，如不介意水印可永远免费用于个人和教育目的。图表库一共有90多个图表数组，可以完美地呈现所有数据可视化目的。（二）FusionChartsFusionCharts特点：包含一系列的demo案例供参考回归和趋势线功能。提供3D图表。单击链接的图表以呈现新数据。在JSFiddle演示中查看每个图表的选项，可以实现即时调整和播放。chartfiddles

页面允许按图表类型，对某些功能和元素进行过滤，从而可以快速定位作业所需的图表。（三）Chart.JSChart.JS是免费使用的开源图标库。Chart.JS是一个面向设计人员和开发人员的简单而灵活的JavaScript图表。Chart.js是一个基于HTML5canvas的响应式、轻量化的图表库。Chart.js

库中提供了六种不同的图表类型，每种类型的图表都有动画效果，每种类型都带有一系列的自定义选项，用户可以创造新的图表类型。（三）Chart.JSChart.js特点：悬停在数据点上时向鼠标指针移动的神奇过渡工具提示。按标签过滤，单击图例以在图表上显示隐藏数据。非数字Y轴，而是标签。通过折线图插值轻松定制。

Chart.js库是模块化的，可以只调用自己需要的图表类型。（四）HighChartsHighCharts库在非商业用途中是一款免费编辑器界面。HighCharts库基本上包含了可能需要的各种图表，提供了一系列不同风格的仪表图表，速度计、电表式仪表等。允许客户端用户设计和配置图表，客户可以准确选择所需图表，可以自定义图表系列、文本的字体系列和颜色（四）HighChartsHighCharts特点：针对响应式设计和触摸设备进行了优化。能够使用大数据。在悬停上渲染工具提示是非常快速的。能够注释图表。数据可以直接从CSV文件加载到图表中。HighCharts使用知识点二Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在Web网站或是Web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达20种图表，其中很多图表可以集成在同一个图形中形成混合图。HighChartsHighCharts（一）HighCharts特性兼容性

-支持所有主流浏览器和移动平台（android、iOS等）。多设备

-支持多种设备，如手持设备iPhone/iPad、平板等。免费使用

-供个人免费学习使用。轻量

-highcharts.js内核库大小只有35KB左右。配置简单

-使用json格式配置动态

-可以在图表生成后修改。多维

-支持多维图表配置提示工具

-鼠标移动到图表的某一点上有提示信息。时间轴

-可以精确到毫秒。导出

-表格可导出为PDF/PNG/JPG/SVG格式输出

-网页输出图表。可变焦

-选中图表部分放大，近距离观察图表；外部数据

-从服务器载入动态数据。文字旋转

-支持在任意方向的标签旋转。（二）支持的图表类型HighCharts支持的图表类型如下表：序号图表类型1曲线图2区域图3饼图4散点图5气泡图6动态图表7组合图表83D图9测量图10热点图11树状图（Treemap）（三）Highcharts环境配置Web开发时Highcharts与jQuery结合使用，所以在加载Highcharts前必须先加载jQuery库。Highcharts安装可以使用以下两种方式：访问下载Highcharts包。使用官方提供的CDN地址：/highcharts.js。（三）Highcharts环境配置使用下载的方式，在HTML页面引入Highcharts代码：<head><scriptsrc="/highcharts.js"></script></head>使用官方提供的CDN地址：1.使用下载的方式（推荐）2.使用CDN<head><scriptsrc="/highcharts/highcharts.js"></script></head>创建json数据，组合配置信息。第三步：创建json数据Highcharts库使用json格式来配置标题、副标题、X轴、Y轴、提示信息、图表对齐、数据第二步:创建配置文件第一步：创建HTML页面创建一个HTML页面，引入jQuery和Highcharts库3214使用('#container').highcharts(json);绘制图表。第四步:绘制图表（四）Highcharts配置步骤ECharts使用知识点三ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts遵循Apache-2.0开源协议，免费商用。ECharts兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。。EChartsECharts（一）ECharts特性丰富的可视化类型:提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图；用于地理数据可视化的地图、热力图、线图；用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标；用于BI的漏斗图，仪表盘；并且支持图与图之间的混搭。多种数据格式无需转换直接使用:内置的dataset属性（4.0+）支持直接传入包括二维表，key-value等多种格式的数据源，此外还支持输入TypedArray格式的数据。千万数据的前端展现:通过增量渲染技术（4.0+），配合各种细致的优化，ECharts能够展现千万级的数据量。移动端优化:针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。PC端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。（一）ECharts特性多渲染方案，跨平台使用:支持以Canvas、SVG（4.0+）、VML的形式渲染图表。深度的交互式数据探索:提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件;可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。多维数据的支持以及丰富的视觉编码手段:对于传统的散点图等，传入的数据也可以是多个维度的。动态数据:数据的改变驱动图表展现的改变。绚丽的特效:针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。通过GL实现更多更强大绚丽的三维可视化:在VR，大屏场景里实现三维的可视化效果。无障碍访问（4.0+）:支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容。（二）ECharts环境配置ECharts安装可以使用以下三种方式：安装独立版本下载echarts.min.js。使用CDN方法：/echarts/4.3.0/echarts.min.js。使用NPM方法。（二）ECharts环境配置可以在直接下载echarts.min.js、echarts.js，并用<script>标签引入。也可以在ECharts的官网上直接下载更多丰富的版本，包含了不同主题跟语言，下载地址：/zh/download.html完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。常用版：echarts/dist/mon.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/mon.js。精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。1.独立版本（二）ECharts环境配置以下推荐国外比较稳定的两个CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。StaticfileCDN（国内）:/echarts/4.3.0/echarts.min.js。百度：/dist/echarts.min.js,保持了最新版本。cdnjs:/ajax/libs/echarts/4.3.0/echarts.min.js。<head>。。。<scriptsrc="/echarts/4.3.0/echarts.min.js"></script></head>StaticfileCDN（国内）：2.使用CDN（二）ECharts环境配置<head>。。。<scriptsrc="/ajax/libs/echarts/4.3.0/echarts.min.js"></script></head>Cdnjs：2.使用CDN<head>。。。<scriptsrc="/npm/echarts@4.3.0/dist/echarts.min.js"></script></head>jsDelivr：（二）ECharts环境配置安装NMP（NodePackage

Manager）后，可通过nmp获取echarts。安装完成后，

ECharts和zrender会放在node_modules目录下，我们可以直接在项目代码中使用

require('echarts')

来使用。varecharts=require('echarts');//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//绘制图表myChart.setOption({

。。。});3.NPM方法使用json数据格式的配置来绘制图表。echarts.init(document.getElementById('main')).setOption(option);第三步：设置配置信息，生成图表id为main的div用于包含ECharts绘制的图表第二步:准备一个具备高宽的DOM容器第一步：创建HTML页面创建一个HTML页面，引入echarts.min.js。321（四）Highcharts配置步骤家庭用电统计界面程序设计知识点四（一）创建温湿度调节界面新建“家庭用电统计界面”项目，并新建“家庭用电统计界面.html”。复制模板代码，粘贴代码到“家庭用电统计界面”文件中。（二）创建js源码文件新建“drawHighCharts.js”文件和“drawECharts.js”文件。（三）添加柱状图drawHighCharts.js源代码创建图表入口函数；在入口函数中添加内容：设置图表类型；设置图表标题；设置图表副标题；设置X轴显示项；设置Y轴显示项；配置数据点提示框样式；设置数据点选项样式；配置图例选项；配置数据列选项；创建json数据。绘制图表（四）添加饼状图drawECharts.js源码初始化饼状图echarts图表；option中设置配置项和数据：设置图表标题；配置数据点提示框样式；配置图例组件样式；配置数据列选项；绘制图表（五）添加家庭用电统计界面页面内容<head><metacharset="UTF-8"/><title>家庭用电统计</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="/highcharts.js"></script><scriptsrc="/echarts/4.3.0/echarts.min.js"></script></head>在head部分将文档标题修改为“光家庭用电统计”；添加HightCharts和ECharts在线库。1.修改head中标题（五）添加家庭用电统计界面页面内容<body><divclass="container"><h1>用电统计</h1> <divclass="row"><divclass="col-md-6">

<h3>每月用电统计</h3> <divstyle="text-align:center;">

<divid="zzt1"style="width:550px;height:400px;margin:0auto"></div> </div></div><divclass="col-md-6"> <h3>当月峰谷用电占比</h3> <divstyle="text-al

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论