如何在DataV可视化应用中为组件添加数据_DataV数据可视化(DataV)-阿里云帮助中心

本文档为您介绍在DataV可视化应用中，为组件添加数据的方法。

添加地图数据

在画布编辑器页面，单击选中基础平面地图组件。
在右侧的数据面板中，单击等值面层。
在等值面层的数据面板中，单击插值点数据接口。
说明 等值面层的数据包括了裁剪边界数据接口数据和插值点数据接口数据。由于本示例的数据区域是全国范围，因此裁剪边界数据接口的数据可以保持不变。您也可以根据需要修改裁剪边界数据接口的数据。
在插值点数据接口的配置页面，单击配置数据源。
在设置数据源页面，按照以下说明配置数据源。
- 数据源类型：选择API。由于处理接口章节已经写好了对应的API，也已经测试了数据获取，所以修改等值面层组件的插值点的数据源类型为API。
- URL：填写处理接口中测试的地址（本文测试http://127.0.0.1:8888/aqi?date=2017012722）。
单击预览数据源返回结果，查看数据返回结果。
单击数据响应结果右侧的刷新图标，查看数据响应结果。
数据响应成功后，组件将在画布上展示对应的数据样式。
退出设置数据源页面，按照以下说明，设置等值面层组件的配置样式。
1. 在等值面层的配置页面，单击右侧面板的配置。
2. 在配置面板中，设置像元大小，推荐设置为3。
  重要像元大小越大，插值越快，精度越低。
3. 设置渲染方式，推荐设置为线性渲染。
4. 设置分类数目，推荐设置为35。

添加时间轴数据

在画布编辑器页面，单击选中时间轴组件。
在右侧的数据面板中，单击配置数据源。
在设置数据源页面，选择数据源类型为静态数据。

参考时间轴组件的默认数据，创建您需要的数据，并替换示例静态数据。

例如，选择2017年1月22日到2017年2月2日，每天22点作为时间轴数据。

[
{
 "name": "2017年1月22日22时",
 "date": 2017012222,
 "value": 2017012222
},
{
 "name": "2017年1月23日22时",
 "date": 2017012322,
 "value": 2017012322
},
{
 "name": "2017年1月24日22时",
 "date": 2017012422,
 "value": 2017012422
},
{
 "name": "2017年1月25日22时",
 "date": 2017012522,
 "value": 2017012522
},
{
 "name": "2017年1月26日22时",
 "date": 2017012622,
 "value": 2017012622
},
{
 "name": "2017年1月27日22时",
 "date": 2017012722,
 "value": 2017012722
},
{
 "name": "2017年1月28日22时",
 "date": 2017012822,
 "value": 2017012822
},
{
 "name": "2017年1月29日22时",
 "date": 2017012922,
 "value": 2017012922
},
{
 "name": "2017年1月30日22时",
 "date": 2017013022,
 "value": 2017013022
},
{
 "name": "2017年1月31日22时",
 "date": 2017013122,
 "value": 2017013122
},
{
 "name": "2017年2月1日22时",
 "date": 2017020122,
 "value": 2017020122
},
{
 "name": "2017年2月2日22时",
 "date": 2017020222,
 "value": 2017020222
}
]

字段	说明
name	时间轴的轴点显示的内容。
date	作为回调ID选项使用。
value	对应的时间。

数据响应成功后，组件将在画布上展示对应的数据样式。

退出设置数据源页面，在时间轴组件的配置面板中，单击事件节点，设置数据格式为%Y%m%d%H。
单击交互，设置回调ID的值为data。

添加地图标题数据

在画布编辑器页面，单击选中标题组件。
在右侧的数据面板中，单击配置数据源。
在设置数据源页面，选择数据源类型为数据库。
在选择已有数据源列表中，选择一个数据库。
说明如果没有可选的数据库，您可以单击新建，按照系统提示，新建一个数据库。详情请参见配置数据源。

在SQL编辑区域，输入以下SQL脚本。

select to_char(to_timestamp(:date,'YYYYMMDDHH24'),'YYYY年mm月DD日HH24时')||'空气质量' as value;

:date：在实际浏览时会传入回调ID对应的值。

单击预览数据源返回结果，查看数据返回结果。
单击数据响应结果右侧的刷新图标，查看数据响应结果。
数据响应成功后，组件将在画布上展示对应的数据样式。