数据图表前端组件在物联网和实时监控的场景有宽泛的利用，以后比拟风行的有Echarts、HighCharts等组件。本文次要解说如何通过DolphinDB的Web数据接口和JavaScript来展现 DolphinDB time-series database 的数据。
DolphinDB提供了基于HTTPS协定的接口，能够通过HTTP的post形式提交查问语句并返回JSON格局的后果。具体用法能够参考DolphinDB Web API。
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前端组件所需的数据格式如下：
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开发包能够使转换更加简略。
上面通过例子介绍如何应用Echarts和HighCharts组件来展现DolphinDB中的数据。
- Echarts代码示例
假如以下场景：工厂有10台设施，每一毫秒采集温度值数据并写入DolphinDB分布式数据表中，并在网页中展现出每秒钟平均温度线状图。
在DolphinDB中通过脚本模仿生成10秒钟的数据。
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文件。
<!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>代码运行的后果如下图所示：
- 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>运行后果如下图所示：
应用过程中有任何问题，能够退出DolphinDB技术交换群，智臾科技：DolphinDB技术交换群，内含二维码。