iT邦幫忙

0

請問有前輩使用過Google Charts畫Bar Chart嗎？

#google charts plotly
fetjim 2019-10-24 04:00:19 ‧ 1172 瀏覽

  • 分享至 

  • xImage

請問有前輩使用過Google Charts、Plotly或其他函式庫畫Bar Chart嗎？
我想要畫的類似是這樣的圖
https://ithelp.ithome.com.tw/upload/images/20191024/20122412Rc5vMrQCNs.png

目前己經嘗試到這樣的程度，但看起來還是有一些差距，我想先試試看是否能做到類似上面的圖，若可以的話，再使用PHP或Python去撈MariaDB的資料餵給畫圖的函式庫，謝謝。
https://ithelp.ithome.com.tw/upload/images/20191024/20122412QALE1XxUtd.png

ccutmis iT邦高手 2 級 ‧ 2019-10-24 10:02:29 檢舉
推薦用 D3.js
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

3 個回答

2
ccutmis
iT邦高手 2 級 ‧ 2019-10-25 09:02:01
最佳解答

推薦用 D3.js

(New!) Demo: http://www.web3d.url.tw/ITHELP/D3_20191025/
(2019/10/30更新 使用d3.v5.js data由動態載入csv檔取得)
csv檔內容: http://www.web3d.url.tw/ITHELP/D3_20191025/data.csv

舊demo(d3.v5.js data為陣列變數)
http://www.web3d.url.tw/ITHELP/D3_20191025/index-v5-old.htm

舊demo(d3.v2.js data為陣列變數)
http://www.web3d.url.tw/ITHELP/D3_20191025/index-v2-old.htm

官網: https://d3js.org/

先前提供的demo版本有些舊(v2)，把它改成v5的版本給樓主參考。
另外也加了比例尺(scaleLinear)效果，它現在可以隨螢幕寬度不同而自動縮放。

座標軸(axes)跟轉場效果就請樓主自行研究了。

ccutmis iT邦高手 2 級 ‧ 2019-10-30 12:32:27 檢舉

先前提供的demo版本有些舊(v2)，把它改成v5的版本給樓主參考。

登入發表回應
2
海綿寶寶
iT邦大神 1 級 ‧ 2019-10-24 10:02:56

我畫的 bar chart 是最基本的 bar chart
你這個複雜多了

還好 Google 得到有點類似的(使用 Google Chart)
做法說明
Demo

可以用的話
選我正解

登入發表回應
2
dragonH
iT邦超人 5 級 ‧ 2019-10-24 10:34:24

chart.js 參戰

codepen

chart.js

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22205 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙