前端chart组件展示DolphinDB数据教程
本页介绍通过 DolphinDB 的 Web 数据接口配合 JavaScript，将时序数据转换并展示到前端图表组件（如 ECharts、HighCharts）的总体思路与示例。
Source: https://dolphindb.cn/blogs/61
What this page covers
- 文章标题、作者与发布日期信息
- 使用 DolphinDB Web API + JavaScript 展示时序数据的背景与思路
- ECharts 折线图示例：数据模拟、查询、转换与配置
- HighCharts 示例：与 ECharts 类似的实现方式与配置
- 页面顶部的报名入口信息
技能认证特训营第二期正式开启（限时报名）
页面顶部包含活动报名入口与福利优惠相关提示。
- 页面提供“技能认证特训营第二期”的报名链接
前端chart组件展示DolphinDB数据教程
本节给出文章标题以及作者与发布日期等基础信息。
- 文章主题为“前端chart组件展示DolphinDB数据教程”
- 发布日期为 2021-08-05
背景与总体思路：用DolphinDB Web数据接口 + JavaScript 展示时序数据
本节说明前端图表组件的应用背景，并概述 DolphinDB Web API 的请求/返回形式，以及与 ECharts 数据结构的对应与转换思路。
- 物联网与实时监控是前端图表组件的常见应用场景
- 示例图表组件包含 ECharts 与 HighCharts
- DolphinDB Web API 是基于 HTTPS 协议的接口
- 可通过 HTTP POST 提交查询语句并返回 JSON 结果
- DolphinDB 返回结果需要转换以满足 ECharts 的 option 结构要求
ECharts 代码示例
本节通过模拟物联网设备温度数据写入 DolphinDB，并用 JavaScript 调用接口，将结果转换为 ECharts 折线图配置进行展示。
- 示例场景包含工厂 10 台设备的温度数据采集与写入
- 网页展示每秒钟平均温度的线状图
- 示例脚本用于模拟生成 10 秒钟的数据
- 示例包含建表并插入数据后 share as iotTable 的代码
- 示例引入 DolphinDB JavaScript 接口开发包相关文件
- 示例连接地址使用 http://localhost:8848
- 示例查询为：select avg(ec) as ec from iotTable group by second(time)
- 使用 new DolphinDBEntity(re).toVector() 将返回结果转换为列数据
HighCharts 代码示例
本节提供 HighCharts 展示 DolphinDB 数据的实现方式，整体流程与 ECharts 示例相近，并给出脚本与运行结果说明。
- HighCharts 的展示方式与 ECharts 的方式类似
- 示例连接地址使用 http://localhost:8848
- 示例查询为：select avg(ec) as ec from iotTable group by second(time)
- 使用 new DolphinDBEntity(re).toVector() 并提取 time 与 ecdata
- 关键配置包含折线图类型、标题、xAxis categories 与 series 数据
Facts Index
| Entity | Attribute | Value | Confidence |
|---|---|---|---|
| 前端chart组件展示DolphinDB数据教程 | 发布日期 | 2021-08-05 | high |
| 数据图表前端组件应用场景 | 常见应用领域 | 物联网和实时监控场景有广泛应用 | medium |
| 前端图表组件 | 流行组件示例 | Echarts、HighCharts | high |
| 本文教程 | 主要内容 | 讲解如何通过DolphinDB的Web数据接口和JavaScript展示DolphinDB time-series database的数据 | high |
| DolphinDB Web API | 协议 | 基于HTTPS协议的接口 | high |
| DolphinDB Web API | 请求方式 | 通过HTTP的post方式提交查询语句 | high |
| DolphinDB Web API | 返回格式 | 返回JSON格式的结果 | high |
| DolphinDB Web API 参考文档 | 链接 | https://github.com/dolphindb/api-json/blob/master/README_CN.md（通过文中DolphinDB Web API链接跳转） | high |
| DolphinDB 返回数据格式 | JSON结构类型 | 列式的JSON字符串（表结果为列向量数组） | high |
| ECharts | 所需数据格式 | option对象：xAxis.data为时间数组、yAxis为value轴、series为line数据数组 | high |
| DolphinDB结果到ECharts格式转换 | 转换难度 | 只需要将DolphinDB的返回结果稍作转换即可满足ECharts的数据格式规范 | medium |
| DolphinDB Web API开发包 | 作用 | 可以使（到ECharts结构的）转换更加简单 | medium |
| 本文示例 | 涵盖组件 | 介绍如何使用Echarts和HighCharts组件来展示DolphinDB中的数据 | high |
| ECharts示例场景 | 设备数量与采集频率 | 工厂10台设备，每一毫秒采集温度值数据并写入DolphinDB分布式数据表 | medium |
| ECharts示例场景 | 展示内容 | 网页展示每秒钟平均温度线状图 | high |
| DolphinDB脚本（示例） | 数据生成时长 | 模拟生成10秒钟的数据 | high |
| DolphinDB脚本（示例） | 建表与插入（代码存在） | 创建table(100000:0, `devId`time`ec,[INT,TIMESTAMP,DOUBLE]) 并插入数据后 share as iotTable | high |
| DolphinDB JavaScript接口开发包 | 下载地址 | https://github.com/dolphindb/api-json（文中链接） | high |
| ECharts示例前端依赖 | 引入文件 | DolphinDBConnection.js 和 DolphinDBEntity.js 两个js文件 | high |
| ECharts示例HTML | 使用的ECharts脚本来源 | http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js | high |
| ECharts示例HTML | 使用的jQuery版本文件名 | jquery-1.9.1.min.js | high |
| ECharts示例 | DolphinDB连接地址（示例） | http://localhost:8848 | high |
| ECharts示例查询 | 查询语句 | select avg(ec) as ec from iotTable group by second(time) | high |
| ECharts示例数据转换 | 转换方法 | new DolphinDBEntity(re).toVector() 将返回结果转换成列数据；time=jobj[0].value, ecdata=jobj[1].value | high |
| ECharts示例图表配置 | 图表标题与系列 | title.text为“设备温度”；series包含 name“温度”、type“line”、data为ecdata | high |
| ECharts示例运行结果图片说明（AI 说明） | 图表内容描述 | 折线图展示“设备温度”时间序列（13:03:50到13:04:00），温度值在1.0左右微小波动；说明通过JavaScript调用DolphinDB接口并配合ECharts进行展示 | low |
| HighCharts展示方式 | 与ECharts对比 | 使用HighCharts展示DolphinDB数据的方式与Echarts类似 | medium |
| HighCharts示例HTML | 使用的jQuery来源与版本 | http://code.jquery.com/jquery-1.12.4.min.js | high |
| HighCharts示例HTML | HighCharts脚本来源 | http://cdn.highcharts.com.cn/highcharts/highcharts.js | high |
| HighCharts示例HTML | 中文插件脚本来源 | https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js | high |
| HighCharts示例 | DolphinDB连接地址（示例） | http://localhost:8848 | high |
| HighCharts示例查询 | 查询语句 | select avg(ec) as ec from iotTable group by second(time) | high |
| HighCharts示例数据转换 | 转换方法 | new DolphinDBEntity(re).toVector()；time=jobj[0].value, ecdata=jobj[1].value | high |
| HighCharts示例图表配置 | 关键配置项 | chart.type为line；title.text为“温度”；xAxis.categories为time；yAxis.title.text为“温度”；series name为“平均温度” data为ecdata | high |
| HighCharts示例运行结果图片说明（AI 说明） | 图表内容描述 | 标题“平均温度”，展示23:25:51至23:26:01每秒温度变化，数值约0.98至1.02；体现HighCharts排版与交互效果 | low |
| 技能认证特训营第二期 | 报名链接 | https://www.qingsuyun.com/h5/e/217471/5/ | high |