Html网页展示污染物趋势曲线一种实现

2019-05-08安太兴

中国科技纵横 2019年6期

安太兴

摘要：本文介绍了利用html canvas，jQuery展示污染物排放实时数据的一种方法。目前网页上显示曲线主要有更换图片的方式、利用Adobeflash插件显示的方式和基于html canvas的方式。更换图片的方式，实时性不好，适合时间间隔比较大的情况。Adobeflash插件方式，实时性好，有很好的用户体验，但容易给系统带来安全隐患，也可能遭到用户拒绝安装，而canvas绘图方式实时性好，而且相对安全。随着html标准的发展，canvas得到更多的浏览器厂商支持，成为网页开发不错的选择。

关键词：html5;canvas;jQuery趋势曲线

中图分类号：TP311 文献标识码：A 文章编号：1671-2064（2019）06-0049-02

0 前言

环境监控系统中，不仅要显示污染物排放的实时数据，还要查看历史数据，以及数据的连续变化趋势。本文介绍了在网页中显示趋势曲线的一种方法。以前在网页中显示动画，基本上都是使用AdobeFlash插件。但是浏览器开发商看插件不顺眼，逐渐不再提供支持。而Html5提供了flash的替代方案，与之前版本最大的变化之一是添加了canvas 元素。canvas提供了一个通用的绘图平面，开发人员可以用它完成一些通用常用Adobeflash来完成的任务。它使浏览器可以直接处理原来要由Adobeflash插件来处理的内容。

1 界面设计

如图1界面草图，界面分为趋势曲线控制区和曲线显示区。控制区显示曲线的名称，当前值、单位可以设置曲线显示的颜色、宽度、类型、上限值、下限值，可以根据上下限值调整曲线的显示比例。趋势显示区显示曲线的图像，图例显示区显示曲线的图例最大值最小值。时间刻度显示区显示x时间轴及时间刻度。

2 对象设计

本系统设计9个对象，如图2类图草图所示，TrendGroup用于设置全局属性。TrendController负责控制区的显示及设置。TrendCanvas负责曲线的绘制，包括几个对象。PanelBorder负责canvas边框的绘制。PanelBackground负责背景图案的绘制，GridLine负责绘制背景的网格线，XAxis负责绘制时间轴及时间刻度。Legend负责绘制图例。TrendCurve负责绘制曲线。

几个对象都实现了painting接口，为了避免看起里图形混乱，在图中没有画出。

3 几个主要的方法

（1）$.ajax（options）。此函数用于向后台发起ajax请求。参数options是一个对象实例，对象的属性定义了这个操作的参数。返回值是XHR的实例。Options的主要的属性有：

url，字符串型，是请求的url地址。

type，字符串型，是将要使用的http方法，默认为GET。

dataType，字符串型，用来标识请求响应返回的数据的类型。这个值决定在把数据传递给回调函数之前进行什么后续处理。有效值为：xml，html，json，script，text。

timeout，數值型，设置ajax请求的超时值。

success，函数型，请求成功时的回调函数。

error，函数型，请求响应为错误时的回调函数。

complete，函数型，在请求完成时的回调函数。

async，布尔值，如果设置为false，则为同步请求，在默认情况下，为异步请求。

本文用来获取服务器数据。

（2）$.getJSON（url，parameter，callback）。利用指定的url、使用parameters所带的参数发起GET请求。响应解析为JSON字符串。结果传递给callback。函数返回XHR实例。

参数介绍如下：

url，字符串，请求的url地址。

parameters，一个对象，其属性用于构造查询字符串，并追加到url。

callback，函数型，回调函数，用于处理响应。

本文用于访问服务器数据，获取曲线的参数和时间数据。

（3）$.（selector）.append（content）。用来向指定元素末尾添加内容。本文中用于向趋势控制区添加控件。

（4）canvas.getContext（“2d”）。返回用于绘图的context。为了能使用canvas元素绘图，需要获得一个上下文对象，这个对象开放针对特定图形的绘制函数。

（5）Context.fillRect（x，y，width，height）。此函数用于绘制一个实心的矩形，x，y是矩形的左上角坐标，width，height分别指出绘制的宽度和高度。

（6）Context.clearRect（x，y，width，height）。此函数清除一个矩形区域，用于重绘窗口。x，y指出矩形区域的左上角，width和height指出矩形宽度和高度。

（7）Context.strokeRect（x，y，width，height）。绘制一个空心的矩形，用于绘制矩形的边框。X，y，指出矩形区域的左上角，width和height指出矩形的宽度和高度。

（8）Context.save（）。通过把当前状态压到绘图状态栈上，保存canvas的绘制状态属性的值。绘制状态包括：当前的转换矩阵，当前的剪切区域，当前的虚线列表，以下属性的当前值：strokeStyle，fillStyle，globalAlpha， lineWidth， lineCap，lineJoin，miterLimit，lineDashOffset， shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor， globalCompositeOperation，font，textAlign，textBaseline， direction，imageSmoothingEnabled.

（9）Context.restore（）。通过在绘图状态栈中弹出顶端的状态，将canvas的绘图状态恢复到保存状态时。如果没有保存过状态，此方法不做改变。

（10）Context.moveTo（x，y）。此函数将一个新的子路径的起始点移动到（x，y）坐标

（11）Context.lineTo（x，y）。此函数使用直线连接子路径的终点到（x，y），并不真正地绘图。

（12）Context.stroke（）。使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径。

（13）Context.fillText（text，x，y[，width]）。此函数在（x， y）位置填充文本。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。

（14）Context.strokeText（text，x，y[，width]）。此函数在给定的（x，y）位置绘制空心文本。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。

4 程序实现

本程序趋势曲线控制区由一个div元素构成，div元素子div元素和一个table元素。子div元素包含输入框，按钮等元素，用于输入开始结束时间，查询按钮等。table中列出了曲线的名称，颜色，当前值，描述，限值等。但添加曲线时，通过jQuery的方法append，向表table中动态添加的行元素。

趋势显示区由canvas元素构成，也由上面介绍的方法绘制。

软件效果如图3完成图所示。

5 结语

本文介绍了一种使用canvas和jQuery完成网页绘制曲线的方式，限于篇幅没有粘贴代码，不过文中介绍了关键方法的用法说明，读者可以参考。