乐趣区

关于数据可视化:干货丨如何用前端chart组件展示DolphinDB数据教程

jiezi

数据图表前端组件在物联网和实时监控的场景有宽泛的利用，以后比拟风行的有 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 中的数据。

  1. 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>

代码运行的后果如下图所示：

  1. 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 技术交换群，内含二维码。

退出移动版