Day 29 数据可视化DataV-2

继上一篇我们基础认识了DataV的概念，接下来今天就要来实际产出一个图表罗!

实务操作DataV:

这里笔者找到台北市的社会住宅公开资料API，并透过DataV设计一个可以即时更新的数据图

1. 点新建可视化进入
   

2. 阿里云有提供很多欲设模板可以套用，这里选使用空白画板
   

3. 输入任意名称之後点选创建
   

4. 进到这个空白画版之後，点左边地图，然後选择基础平面地图让他秀在上面
   

5. 点击那张图，我们需要一张没有附加特效的地图，把右上角那些子组件删除
   

6. 想要改变地图的样貌，再次点击子组建管理，然後点击底图层，然後添加子组建
   

7. 我们直接点进刚创建好的底图层
   

8. 在瓦片中选择Google地图
   

9. 这样就简单把Google地图汇入到DataV里面了，现在我们要把这经纬度锁定在台北，在点回那张图，下面有全局设置，把地图中心改成我们需要的（地图缩放12.5、经度121.55、纬度25.05、台北市）
   

10. 我们在子组建管理再添加一个流式气泡层
    

11. 在数据里面点选流式气泡层
    

12. 选择需要配置的数据源
    

13. 数据源类型选择使用API然後在台北市政府的公开资料处拿API的URL，勾选服务器代理需求，就可以看到下面数据响应结果，因资料里有座标数据字串"lat"、"lng"，左侧大图中也开始显示标记位置
    

14. 一样回到数据，我们要让流式气泡图层组件能显示社会宅的名称，把预设info字段填入name，他就会自动去映射取得API数据的name值并且显示在上面，左图也开始显示位置跟该社会住宅的正确名称
    

15. 点选上方设置，调整一下尺寸跟图表位置，让他投射的时候是满版且置中的（尺寸1920x1080、图表位置0.0）
    

16. 再来我们可以修改一下住宅的图片还有字格的颜色，点选配置，然後流式气泡层
    

17. 我们可以从网路上找寻一些房子的照片更换，更改一下背景颜色，也可以调整一下一次出现的住宅项目
    

18. 已经有了地图座标位置，想在加上文字效果，点选表格下拉式选单，找到轮播列表後插入
    

19. 我们将它拉到左上角比较方便观看，然後在右上配置中调整一下大小跟不透明度（尺寸600x300、不透明度0.75）
    

20. 一样点选数据，配置数据源
    

21. 跟刚刚一样数据源类型选API然後去台北市政府的资料处拿API的URL把他贴上，勾选服务器代理需求
    

22. 回到右上设置，开起自订义列，将列字段明输入匹配数据源的栏位，三块显示标签我们显示区域、住宅名称、兴建进度，因为住宅名称较长，我们把他拉大一点
    
    
    

23. 我们可以在这边大概改一下表头行高颜色，还有行配置的颜色等
    

24. 这样子我们就完成一个地图显示各个社会住宅地点，以及左上角轮播各个区域、住宅名称、兴建进度的表
    

25. 做完之後别忘记生成一下快照，直接点选右上角快照
    

26. 完成之後我们要来发布成给所有人观看的一个大屏，点选右上角发布
    
    

27. 上面可以简单设置一些访问控制以及token，让你的DataV连结是安全的
    

28. 使用上面的分享连结，把我们刚刚设定的密码给输入进去
    

29. 这样就完成一个美观的社会住宅地点及施工进度的即时同步数据可视化页面罗
    

简单的实作应用到这结束了，虽然看起来相比和原厂提供的范例图还是相差胜远，但只需短暂时间就能够完成一个完整的可视图，DataV所提供的工具及便利性还是挺不错的，利用这套工具搭配各式数据来源相信可以产出更好的应用!