iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

輕鬆Vue一下系列 第 22

Day22-v-charts/條形圖

  • 分享至 

  • xImage
  •  

條形圖

https://ithelp.ithome.com.tw/upload/images/20191006/20112076yqwBEzWvTf.jpg
在生成柱狀圖時,需要在html中建立一個ve-histogram物件:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076pveUAgnuPS.jpg
這裡將會介紹幾種簡單的設定:
1.它透過settings屬性將chartSettings變數綁定,設置顯示的指標。而metrics是用來控制指標;dimension是用來控制維度,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/201120769XC1mqMgcr.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076Dm8LWoE4IR.jpg
2.它透過settings屬性將chartSettings變數綁定,設置堆疊面積圖。而stack是用來控制欲堆疊目標有哪些;條形圖和柱狀圖一樣沒有area屬性,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076YRYp8oRu2v.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076oHD9LmT0fb.jpg
3.它透過settings屬性將chartSettings變數綁定,排序大小。這裡利用metrics來控制指標,再藉由dataOrder來控制排序方式,而desc代表著排序是以大到小進行排列,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076nklQ9SjPdH.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076ex7O4cKC0m.jpg
明日預告:v-charts/圓餅圖


上一篇
Day21-v-charts/柱狀圖
下一篇
Day23-v-charts/圓餅圖
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言