Dygraphs把MySQL数据库数据以曲线形式呈现出来-CSDN博客

本文链接：https://blog.csdn.net/dk_huapen/article/details/141759406

Dygraphs把MySQL数据库数据以曲线形式呈现出来

`
第一章 Linux系统读取Windows下OPC服务器数据
第二章Windows下OpenOPC转发服务安装配置
第三章Linux系统读取OPC数据后存入MySQL数据库
第四章Dygraphs把MySQL数据库数据以曲线形式呈现出来

前言

上一章已经把从OPC服务器读取的数据存入了MySQL数据库，那么数据存入数据库以后作什么用呢？当然是要在需要的时候取出来看，那应该以什么方式呈现出来呢？以时间轴显示的曲线无疑是最好的选择，在工业控制系统里叫历史曲线和实时曲线。我在网上查了下有很多选择，最后纠结在用Dygraphs还是hightchars，最终还是选择了Dygraphs，原因就是它需要的东西非常少，只需要下载两个JS文件并引用到自己的html内就可以了。它的特点特别符合当前的应用场景。

一、Dygraphs

dygraphs是一个轻量级且强大的JavaScript库，专为在Web上高效地展示时间序列数据而设计。由Dan Vanderkam创建并维护，该项目旨在提供一种简单的方法来展示大量数据，并允许用户通过交互式探索进行深入分析。轻量级（我最喜欢的）、展示时间序列（我们的历史曲线就是单纯的时间轴）、大量数据（实际使用中很重要，熟悉工业控制系统的应该了解，每秒1个点，一个小时就是3600个点，十个小时就是36000个点，如果有4条曲线那就是144000个点）、交互式（曲线翻页、实时趋势），这就是我需要的东西。

1.Dygraphs安装

Dygraphs官网：只需要下载dygraph.js和dygraph.css文件就可以像使用其他库文件一样包含进去就可以了。

2.使用Dygraphs

官网上是这样写的：To use dygraphs, include the dygraph.js JavaScript file and dygraph.css CSS file. Then instantiate a Dygraph object.是的包含这两个文件然后创建一个Dygraph对象就可以了。
官网有从简单到复杂的使用方法，其实就是修改Dygraph对象结构中的参数就可以了，大家可以从官网学习下。

二、Dygraphs实例

我是要从前边存入数据库的OPC点已曲线呈现出来，所以需要从MySQL数据库取点并赋值给Dygraph对象的data参数，下面我简单介绍下。
在这里插入图片描述
上图是我做的我们工厂历史曲线的实例，图例中显示了4个测点半小时的历史曲线共72000条数据，性能还是可以的。
下面我简短的举个官网的例子记录下Dygraphs的用法，至于上面的实例我会在后面专门有一章内容记录。

<html>
	<head>
		<script type="text/javascript"src="dygraph.js"></script>
		<link rel="stylesheet" type="text/css"src="dygraph.css"/>
	</head>
	<body>
		<div id="graphdiv"></div>
		<script type="text/javascript">
			Dygraph.onDOMready(function onDOMready() {
				g = new Dygraph(

					// 显示曲线的位置
					document.getElementById("graphdiv"),[

					// data部分
						[ new Date("2009/07/12"), 100, 200 ],
						[ new Date("2009/07/13"), 150, 220 ],
						[ new Date("2009/07/14"), 130, 210 ],
						[ new Date("2009/07/15"), 120, 200 ],
						[ new Date("2009/07/16"), 160, 230 ]
					],
					{labels: [ "x", "A", "B" ]}//x轴和y轴
				);
			});
		</script>
	</body>
</html>

显示效果如下图：
在这里插入图片描述
其实不管显示什么曲线都是将要显示的数据替换data部分就可以了，可以是csv文件，可以是数组。官网上有很多用法，有兴趣可以研究下。

总结

到此就实现结束了这一个小实验的内容，一共四章，从OPC服务器采集数据然后已历史曲线的方式呈现出来。
这是我第一次记录并发布内容，中间有很多瑕疵，但是整体主线就是这样，随后我会把这个实验再重新布置在我们工厂服务器上投入使用，在重新布置过程中还会慢慢将这四章内同再修改完善，尽量让内容完整完善。
我做这个实验是想摆脱现如我厂工控系统历史曲线备份还原困难的情况，现在工控系统备份很大并且都是自己家的备份格式必须在对应工控系统才能还原备份进行查看，但是工控系统又有授权，安装困难等问题。
现在这种方式就是将工控系统数据存入数据库，然后随时随地就可以查看。