看1级片

<form id=AfNFovhOf><nobr id=AfNFovhOf></nobr></form>

<address id=AfNFovhOf><nobr id=AfNFovhOf><nobr id=AfNFovhOf></nobr></nobr></address>

1

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

圖表顯示網頁製作網頁排版網頁製作網頁 html php mysql 資料管理

Justin 2019-08-13 11:45:01 ? 7996 瀏覽

分享至

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

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

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

請教如果能越詳細越好!! 感謝各位

登入發表討論

熱門推薦

{{ item.subject }}

{{ item.channelVendor }} | {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

5 個回答

1

dragonH

iT邦超人 5 級 ? 2019-08-13 11:53:54

最佳解答

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

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

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

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

常見的圖表 lib

google chart

chart.js

...且能自動更新

資料傳輸改用 websocket 方式

就能即時更新資料

所以問題就只剩

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

回應 2
分享
檢舉

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

/upload/images/20190813/20001787vIxc2uEH2l.png
參考2018的文章和Live Demo
喜歡的話
下載原始碼拿去改

選我正解

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Justin iT邦新手 5 級 ? 2019-08-13 13:22:37 檢舉

HI 大大感謝提供

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

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

海綿寶寶 iT邦大神 1 級 ? 2019-08-13 16:34:44 檢舉

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

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

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

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

海綿寶寶 iT邦大神 1 級 ? 2019-08-14 07:37:10 檢舉

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

登入發表回應

0

小魚

iT邦大師 1 級 ? 2019-08-13 13:12:05

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

回應
分享
檢舉

登入發表回應

0

sx0800

iT邦研究生 5 級 ? 2019-08-14 05:17:34

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

回應 1
分享
檢舉

sx0800 iT邦研究生 5 級 ? 2019-08-14 05:22:19 檢舉

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

登入發表回應

1

Jason Cheng (節省哥)

iT邦研究生 2 級 ? 2019-08-14 18:09:18

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

/upload/images/20190814/20118848pTot8Aw40l.png

開源圖表平台 Grafana
https://grafana.com/

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

704 組

團體組數

37 組

累計文章數

5167 篇

最後報名日

9/15

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 17th鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react

IT邦幫忙

HoME 看1级片