iT邦幫忙

1

如何網頁呈現圖表顯示資料

小弟學程式好幾個月,密集的學了很多軟體跟程式語言所以非常(學而不精)
期末要準備專題了!

上網google資料多也雜相對無法串連再一起
現有方式已找一個Dashboard範本做修改,但也只有空外殼沒功能,想請教如何在網頁上用圖表呈現資料且能自動更新,及如何用程式抓取phpmyadmin MySQL資料庫數據做計算改成圖表SHOW在網頁上,整個構想是類似網頁監控流量或是數量,且能夠有分~年/月/日~
長條圖、圓餅圖等等...

使用編程軟體:visual studio、eclipse
使用語言:HTML、css、java、python
使用資料庫: phpmyadmin mysql

請教如果能越詳細越好!! 感謝各位/images/emoticon/emoticon02.gif

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
dragonH
iT邦超人 5 級 ‧ 2019-08-13 11:53:54
最佳解答

想請教如何在網頁上用圖表呈現圖表顯示資料

後端透過 api 將資料送到前端

前端收到資料將圖表畫出來(html + js + css)

資料傳輸用普通的 ajax 就可以達成

常見的圖表 lib

google chart

chart.js

...且能自動更新

資料傳輸 改用 websocket 方式

就能即時更新資料

所以問題就只剩

如何用程式抓取phpmyadmin MySQL資料庫狀態

Justin iT邦新手 5 級 ‧ 2019-08-13 13:24:50 檢舉

感謝提供 有拿到圖表的code但不知如何執行

是該存成 .js 還是 .html 這部分沒甚麼概念
我是用Visual studio在撰寫

dragonH iT邦超人 5 級 ‧ 2019-08-13 13:33:02 檢舉

廣義的網頁

就是 .html 中 寫 .js + .css

所以不是存成 .html 或者 .js

而是 .html = .js + .css

參考1

參考2

0
海綿寶寶
iT邦大神 1 級 ‧ 2019-08-13 12:03:57

https://ithelp.ithome.com.tw/upload/images/20190813/20001787vIxc2uEH2l.png
參考2018的文章Live Demo
喜歡的話
下載原始碼拿去改

選我正解

看更多先前的回應...收起先前的回應...
Justin iT邦新手 5 級 ‧ 2019-08-13 13:22:37 檢舉

HI 大大感謝提供

每個程式有一段此語法 沒學過PHP
我要用甚麼軟體去正確執行呢??
現在用Visual studio

還有一個問題是檔案要存成.php 還是 html
~~php include('server.php') ~~ 這段是要啟動此檔?

密集的學了大概8~9個語言

因為
你的 tag 寫了「php mysql資料管理」
我以為你打算用的語言是 php
沒想到
php 不在你的8~9個語言之一
/images/emoticon/emoticon10.gif

Justin iT邦新手 5 級 ‧ 2019-08-13 17:15:26 檢舉

沒法,不到半年學了很多但都略懂略懂
比較想知道如何從資料庫取出資料->自動簡易加減乘除->表達在html圖表上(且要能自動更新)

如果最後仍然沒有問到你想要的答案
就用這個

0
小魚
iT邦大師 1 級 ‧ 2019-08-13 13:12:05

圖表的話可以查查有些jQuery框架可以用,
長條圖、圓餅圖 基本上都會有,
不過沒有 甚麼奇怪圖

0
sx0800
iT邦新手 2 級 ‧ 2019-08-14 05:17:34

請 google highcharts 或 chartjs 或 echarts 然後選一套你喜歡的用。

sx0800 iT邦新手 2 級 ‧ 2019-08-14 05:22:19 檢舉

忘了 jQuery Sparklines 這個最適合初學者,隨便給幾個數據就會有簡易圖表。

1

如果要減少程式開發量,也可以直接套用現成的圖表系統並把資料餵給它。功能很強,看看這張示意圖:

https://ithelp.ithome.com.tw/upload/images/20190814/20118848pTot8Aw40l.png

我要發表回答

立即登入回答