Day 29 数据可视化DataV-2

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

实务操作DataV:

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

https://ithelp.ithome.com.tw/upload/images/20211011/20140353NoaBYx279m.png


  1. 点新建可视化进入
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353kP3mFhlRFn.png

  2. 阿里云有提供很多欲设模板可以套用,这里选使用空白画板
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353gN9kf1mUkM.png

  3. 输入任意名称之後点选创建
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353qkWEZd52zi.png

  4. 进到这个空白画版之後,点左边地图,然後选择基础平面地图让他秀在上面
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353NHLVc2ep1h.png

  5. 点击那张图,我们需要一张没有附加特效的地图,把右上角那些子组件删除
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353aU1HenGvDf.png

  6. 想要改变地图的样貌,再次点击子组建管理,然後点击底图层,然後添加子组建
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353bEIHyGV8Ex.png

  7. 我们直接点进刚创建好的底图层
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353Ei3EML8Ji4.png

  8. 在瓦片中选择Google地图
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353RkqLXsjBdu.png

  9. 这样就简单把Google地图汇入到DataV里面了,现在我们要把这经纬度锁定在台北,在点回那张图,下面有全局设置,把地图中心改成我们需要的(地图缩放12.5、经度121.55、纬度25.05、台北市)
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353BDwTciuEbT.png

  10. 我们在子组建管理再添加一个流式气泡层
    https://ithelp.ithome.com.tw/upload/images/20211011/201403532rAtGgsWJN.png

  11. 在数据里面点选流式气泡层
    https://ithelp.ithome.com.tw/upload/images/20211011/201403535iFK1ur5SC.png

  12. 选择需要配置的数据源
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353zR9r6MdCbr.png

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

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

  15. 点选上方设置,调整一下尺寸跟图表位置,让他投射的时候是满版且置中的(尺寸1920x1080、图表位置0.0)
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353GdmweIk9AO.png

  16. 再来我们可以修改一下住宅的图片还有字格的颜色,点选配置,然後流式气泡层
    https://ithelp.ithome.com.tw/upload/images/20211011/2014035301aBeSZMdM.png

  17. 我们可以从网路上找寻一些房子的照片更换,更改一下背景颜色,也可以调整一下一次出现的住宅项目
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353zaz3VxdXD9.png

  18. 已经有了地图座标位置,想在加上文字效果,点选表格下拉式选单,找到轮播列表後插入
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353i5TVYXDulp.png

  19. 我们将它拉到左上角比较方便观看,然後在右上配置中调整一下大小跟不透明度(尺寸600x300、不透明度0.75)
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353k1dAznOU6B.png

  20. 一样点选数据,配置数据源
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353dW5fYdvkSV.png

  21. 跟刚刚一样数据源类型选API然後去台北市政府的资料处拿API的URL把他贴上,勾选服务器代理需求
    https://ithelp.ithome.com.tw/upload/images/20211011/201403535iLipPrQm4.png

  22. 回到右上设置,开起自订义列,将列字段明输入匹配数据源的栏位,三块显示标签我们显示区域、住宅名称、兴建进度,因为住宅名称较长,我们把他拉大一点
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353UfO3qOc8K2.png
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353SYerZvc73n.png
    https://ithelp.ithome.com.tw/upload/images/20211011/201403535TcOdU1lJM.png

  23. 我们可以在这边大概改一下表头行高颜色,还有行配置的颜色等
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353AGpGFPalgY.png

  24. 这样子我们就完成一个地图显示各个社会住宅地点,以及左上角轮播各个区域、住宅名称、兴建进度的表
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353PhcUVmOuPR.png

  25. 做完之後别忘记生成一下快照,直接点选右上角快照
    https://ithelp.ithome.com.tw/upload/images/20211011/201403530O0fJORtAR.png

  26. 完成之後我们要来发布成给所有人观看的一个大屏,点选右上角发布
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353Me6DjWoLx3.png
    https://ithelp.ithome.com.tw/upload/images/20211011/201403530O2X8beKNa.png

  27. 上面可以简单设置一些访问控制以及token,让你的DataV连结是安全的
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353OVOJ6UXFby.png

  28. 使用上面的分享连结,把我们刚刚设定的密码给输入进去
    https://ithelp.ithome.com.tw/upload/images/20211011/201403534DMd9ftYfG.png

  29. 这样就完成一个美观的社会住宅地点及施工进度的即时同步数据可视化页面罗
    https://ithelp.ithome.com.tw/upload/images/20211011/20140353iuPFmdDyat.png

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


<<:  Day26-介接 API(番外篇 I)NLP 自然语言处理之初见 Dialogflow ES

>>:  Day 26 - 用canvas 做颜色游戏

[iT铁人赛Day20]JAVA学习心得

做完了这几天的JAVA分享。。。我说是分享啦,因为我没有厉害到可以教别人 恩,所以做完分享之後,我也...

v-bind:is vs keep-alive

首先要介绍的是在component标签中利用v-bind:is(v-bind缩写是「:」所以可以直接...

30天程序语言研究

今天是30天程序语言研究的第九天,研究的语言一样是python,今天主要学习的是档案的写入和写出 网...

[神经机器翻译理论与实作] Google Translate的神奇武器- Seq2Seq (III)

前言 今天继续我们未完成的建模大业吧! 我们要建立的seq2seq模型由LSTM编码器与解码器串接而...