乾貨丨前端chart組件展現DolphinDB數據教程

時間 2021-08-14

標籤 javascript html 前端 java jquery git github json api session 欄目 JavaScript 简体版

原文原文鏈接

數據圖表前端組件在物聯網和實時監控的場景有普遍的應用，當前比較流行的有Echarts、HighCharts等組件。本文主要講解如何經過DolphinDB的Web數據接口和JavaScript來展現 DolphinDB time-series database 的數據。javascript

DolphinDB提供了基於HTTPS協議的接口，能夠經過HTTP的post方式提交查詢語句並返回JSON格式的結果。具體用法能夠參考DolphinDB Web API。html

DolphinDB的返回數據格式是列式的JSON字符串。例如，一個表返回JSON以下：前端

{
	"sessionID": "3691974869",
	"userId": "admin",
	"resultCode": "0",
	"msg": "",
	"object": [{
		"name": "",
		"form": "table",
		"size": "11",
		"value": [{
			"name": "second_time",
			"form": "vector",
			"type": "second",
			"size": "11",
			"value": ["13:03:50", "13:03:51", "13:03:52", "13:03:53", "13:03:54", "13:03:55", "13:03:56", "13:03:57", "13:03:58", "13:03:59", "13:04:00"]
		}, {
			"name": "ec",
			"form": "vector",
			"type": "double",
			"size": "11",
			"value": [1.019094, 0.971753, 0.962792, 1.014048, 0.991746, 1.016851, 0.98674, 1.00463, 0.991642, 1.018987, 1.008604]
		}]
	}]
}

Echarts前端組件所需的數據格式以下：java

option = {
	xAxis: {
		data: ["13:03:50", "13:03:51", "13:03:52", "13:03:53", "13:03:54", "13:03:55", "13:03:56", "13:03:57", "13:03:58", "13:03:59", "13:04:00"]
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		data: [1.019094, 0.971753, 0.962792, 1.014048, 0.991746, 1.016851, 0.98674, 1.00463, 0.991642, 1.018987, 1.008604],
		type: 'line'
	}]
};

從二者的結構來看，只須要將DolphinDB的返回結果稍做轉換便可知足Echarts的數據格式規範。使用DolphinDB Web API開發包能夠使轉換更加簡單。jquery

下面經過例子介紹如何使用Echarts和HighCharts組件來展現DolphinDB中的數據。git

1. Echarts代碼示例

假設如下場景：工廠有10臺設備，每一毫秒採集溫度值數據並寫入DolphinDB分佈式數據表中，並在網頁中展現出每秒鐘平均溫度線狀圖。github

在DolphinDB中經過腳本模擬生成10秒鐘的數據。json

data = table(100000:0, `devId`time`ec,[INT,TIMESTAMP,DOUBLE]);
data.tableInsert(take(1..10,10000),add((1..10000),now()) , norm(1,0.5,10000))
share data as iotTable

經過JavaScript腳本從DolphinDB獲取數據，並轉換爲Echarts所需的格式。這裏使用了DolphinDB JavaScript的接口開發包（下載地址：https://github.com/dolphindb/api-json），並引入DolphinDBConnection.js和DolphinDBEntity.js兩個js文件。api

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="jquery-1.9.1.min.js"></script>
	<script src="DBConnection.js"></script>
	<script src="DolphinDBEntity.js"></script>
	<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>

	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		var conn = new DolphinDBConnection('http://localhost:8848');
		//向DolphinDB發送查詢腳本，並獲取返回的數據
		conn.run("select avg(ec) as ec from iotTable group by second(time)", function(re){
		if(re.resultCode&&re.resultCode=="1"){
			alert(re.msg);
		} else {
			jobj = new DolphinDBEntity(re).toVector();//將返回結果轉換成列數據
			var time = jobj[0].value;
			var ecdata = jobj[1].value;
			var option = {
				title: {
					text: '設備溫度'
				},
				xAxis: {
					data: time
				},
				yAxis: {},
				series: [{
					name: '溫度',
					type: 'line',
					data: ecdata
				}]
			};
			myChart.setOption(option);
		}
	});
		
	</script>
</body>

代碼運行的結果以下圖所示：session

2. HighCharts代碼示例

使用HighCharts展現DolphinDB數據的方式與Echarts相似。下面是HighCharts的示例腳本。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="DolphinDBConnection.js"></script>
	<script src="DolphinDBEntity.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    	var conn = new DolphinDBConnection('http://localhost:8848');
		//向DolphinDB發送查詢腳本，並獲取返回的數據
		conn.run("select avg(ec) as ec from iotTable group by second(time)", function(re){
		if(re.resultCode&&re.resultCode=="1"){
			alert(re.msg);
		} else {
			jobj = new DolphinDBEntity(re).toVector();//將返回結果轉換成列數據
			var time = jobj[0].value;
			var ecdata = jobj[1].value;
			var option = {
                    chart: {
                    type: 'line'
                    },
                    title: {
                        text: '溫度'
                    },
                    xAxis: {
                        categories: time
                    },
                yAxis: {
                    title: {
                        text: '溫度'
                    }
                },
                 series: [{
                    name: '平均溫度',
                    data: ecdata
                }]
            };
			var chart = Highcharts.chart('main', option);

		}
	});
    
	</script>
</body>
</html>

運行結果以下圖所示：