PHP MySQL Google Chart JSON - 完整范例
使用 MySQL 資料表資料作為資料來(lái)源來(lái)產(chǎn)生 Google Chart，我找了很多范例。我找了幾天，發(fā)現(xiàn)網(wǎng)路上很少有使用 PHP 和 MySQL 的范例來(lái)產(chǎn)生 Google Chart (圓餅圖、長(zhǎng)條圖、直條圖、表格)。我最后終于找到一個(gè)范例可以執(zhí)行。
我之前已經(jīng)從 StackOverflow 獲得了很多幫助，所以我這次也要回饋。
我有兩個(gè)范例，一個(gè)使用 Ajax 一個(gè)則沒(méi)有。今天，我只會(huì)展示非 Ajax 的范例。
使用方式：
- 需求：PHP、Apache 及MySQL
-
安裝：
- 使用phpMyAdmin 建立一個(gè)資料庫(kù)，并將其命名為"chart"
- 使用phpMyAdmin 建立一個(gè)表格，并將其命名為"googlechart"，并確保它只有兩欄，因?yàn)槲沂褂昧藘蓹?。不過(guò)，如果你想用更多欄，也可以按照指示對(duì)程式碼做些微的修改
- 指定欄位名稱如下："weekly_task" 和"percentage"
- 在表格中插入一些資料，欄位"_percentage_" 中只能使用數(shù)字
PHP-MySQL-JSON-Google Chart 的范例：
<?php
$con=mysql_connect("localhost","Username","Password") or die("Failed to connect with database!!!!");
mysql_select_db("資料庫(kù)名稱", $con);
// Google Chart 表格包含兩個(gè)欄位，分別是 weekly_task 和 percentage
// 這個(gè)範(fàn)例將顯示一個(gè)圓餅圖，如果你需要其他的圖表例如長(zhǎng)條圖，你必須對(duì)程式碼做一些微幅的調(diào)整，才能與長(zhǎng)條圖或其他圖表搭配
$sth = mysql_query("SELECT * FROM chart");
/*
---------------------------
範(fàn)例資料：表格 (Chart)
--------------------------
weekly_task percentage
Sleep 30
Watching Movie 40
work 44
*/
// flag 不需要
$flag = true;
$table = array();
$table['cols'] = array(
// 圖表的標(biāo)籤，代表欄位標(biāo)題
// 注意，一個(gè)欄位使用 "string" 格式，另一個(gè)使用 "number" 格式，因?yàn)閳A餅圖只使用 "數(shù)字" 來(lái)計(jì)算百分比，字串則用於欄位標(biāo)題
array('label' => 'Weekly Task', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
// 下列程式碼用於分割圓餅圖
$temp[] = array('v' => (string) $r['Weekly_task']);
// 每一個(gè)分塊的值
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--載入 Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// 載入視覺(jué)化 API 及圓餅圖套件。
google.load('visualization', '1', {'packages':['corechart']});
// 設(shè)定一個(gè) callback 在 Google Visualization API 載入時(shí)執(zhí)行。
google.setOnLoadCallback(drawChart);
function drawChart() {
// 從伺服器載入的 JSON 資料中，建立我們的資料表格。
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '我的每週計(jì)畫',
is3D: 'true',
width: 800,
height: 600
};
// 使用部分選項(xiàng)，實(shí)例化並繪製我們的圖表。
// 別忘了檢查你的 div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--這是會(huì)放置圓餅圖的 div-->
<div>PHP-PDO-JSON-MySQL-Google Chart 的范例：
<?php
/*
指令碼 : PHP-PDO-JSON-mysql-googlechart
作者 : Enam Hossain
版本 : 1.0
*/
/*
--------------------------------------------------------------------
使用方式：
--------------------------------------------------------------------
需求：PHP、Apache 及 MySQL
安裝：
--- 使用 phpMyAdmin 建立一個(gè)資料庫(kù)，並將其命名為 "chart"
--- 使用 phpMyAdmin 建立一個(gè)表格，並將其命名為 "googlechart"，並確保它只有兩欄，因?yàn)槲沂褂昧藘蓹?。不過(guò)，如果你想用更多欄，也可以按照指示對(duì)程式碼做些微的修改
--- 指定欄位名稱如下："weekly_task" 和 "percentage"
--- 在表格中插入一些資料
--- _percentage_ 欄位只能使用數(shù)字
---------------------------------
範(fàn)例資料：表格 (googlechart)
---------------------------------
weekly_task percentage
----------- ----------
Sleep 30
Watching Movie 10
job 40
Exercise 20
*/
/* 資料庫(kù)名稱 */
$dbname = 'chart';
/* 資料庫(kù)使用者名稱與密碼 */
$username = 'root';
$password = '123456';
try {
/* 建立資料庫(kù)連線 */
$conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
/* 從 googlechart 表格中選出所有 weekly tasks */
$result = $conn->query('SELECT * FROM googlechart');
/*
---------------------------
範(fàn)例資料：表格 (googlechart)
--------------------------
weekly_task percentage
Sleep 30
Watching Movie 10
job 40
Exercise 20
*/
$rows = array();
$table = array();
$table['cols'] = array(
// 圖表的標(biāo)籤，代表欄位標(biāo)題。
/*
注意，一個(gè)欄位使用 "string" 格式，另一個(gè)使用 "number" 格式，因?yàn)閳A餅圖只使用 "數(shù)字" 來(lái)計(jì)算百分比，字串則用於分塊標(biāo)題
*/
array('label' => 'Weekly Task', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')
);
/* 抽取 $result 中的資訊 */
foreach($result as $r) {
$temp = array();
// 下列程式碼用於分割圓餅圖
$temp[] = array('v' => (string) $r['weekly_task']);
// 每一個(gè)分塊的值
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// 將資料轉(zhuǎn)換成 JSON 格式
$jsonTable = json_encode($table);
//echo $jsonTable;
} catch(PDOException $e) {
echo '錯(cuò)誤：' . $e->getMessage();
}
?>
<html>
<head>
<!--載入 Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// 載入視覺(jué)化 API 及圓餅圖套件。
google.load('visualization', '1', {'packages':['corechart']});
// 設(shè)定一個(gè) callback 在 Google Visualization API 載入時(shí)執(zhí)行。
google.setOnLoadCallback(drawChart);
function drawChart() {
// 從伺服器載入的 JSON 資料中，建立我們的資料表格。
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '我的每週計(jì)畫',
is3D: 'true',
width: 800,以上是如何使用 PHP、MySQL 和 JSON 生成 Google 圖表（餅圖、條形圖、柱形圖和表格）？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
PHP變量范圍解釋了
Jul 17, 2025 am 04:16 AM
PHP變量作用域常見(jiàn)問(wèn)題及解決方法包括：1.函數(shù)內(nèi)部無(wú)法訪問(wèn)全局變量，需使用global關(guān)鍵字或參數(shù)傳入；2.靜態(tài)變量用static聲明，只初始化一次并在多次調(diào)用間保持值；3.超全局變量如$_GET、$_POST可在任何作用域直接使用，但需注意安全過(guò)濾；4.匿名函數(shù)需通過(guò)use關(guān)鍵字引入父作用域變量，修改外部變量則需傳遞引用。掌握這些規(guī)則有助于避免錯(cuò)誤并提升代碼穩(wěn)定性。
如何在PHP中牢固地處理文件上傳？
Jul 08, 2025 am 02:37 AM
要安全處理PHP文件上傳需驗(yàn)證來(lái)源與類型、控制文件名與路徑、設(shè)置服務(wù)器限制并二次處理媒體文件。1.驗(yàn)證上傳來(lái)源通過(guò)token防止CSRF并通過(guò)finfo_file檢測(cè)真實(shí)MIME類型使用白名單控制；2.重命名文件為隨機(jī)字符串并根據(jù)檢測(cè)類型決定擴(kuò)展名存儲(chǔ)至非Web目錄；3.PHP配置限制上傳大小及臨時(shí)目錄Nginx/Apache禁止訪問(wèn)上傳目錄；4.GD庫(kù)重新保存圖片清除潛在惡意數(shù)據(jù)。
在PHP中評(píng)論代碼
Jul 18, 2025 am 04:57 AM
PHP注釋代碼常用方法有三種：1.單行注釋用//或#屏蔽一行代碼，推薦使用//；2.多行注釋用/.../包裹代碼塊，不可嵌套但可跨行；3.組合技巧注釋如用/if(){}/控制邏輯塊，或配合編輯器快捷鍵提升效率，使用時(shí)需注意閉合符號(hào)和避免嵌套。
發(fā)電機(jī)如何在PHP中工作？
Jul 11, 2025 am 03:12 AM
AgeneratorinPHPisamemory-efficientwaytoiterateoverlargedatasetsbyyieldingvaluesoneatatimeinsteadofreturningthemallatonce.1.Generatorsusetheyieldkeywordtoproducevaluesondemand,reducingmemoryusage.2.Theyareusefulforhandlingbigloops,readinglargefiles,or
撰寫PHP評(píng)論的提示
Jul 18, 2025 am 04:51 AM
寫好PHP注釋的關(guān)鍵在于明確目的與規(guī)范，注釋應(yīng)解釋“為什么”而非“做了什么”，避免冗余或過(guò)于簡(jiǎn)單。1.使用統(tǒng)一格式，如docblock（/*/）用于類、方法說(shuō)明，提升可讀性與工具兼容性；2.強(qiáng)調(diào)邏輯背后的原因，如說(shuō)明為何需手動(dòng)輸出JS跳轉(zhuǎn)；3.在復(fù)雜代碼前添加總覽性說(shuō)明，分步驟描述流程，幫助理解整體思路；4.合理使用TODO和FIXME標(biāo)記待辦事項(xiàng)與問(wèn)題，便于后續(xù)追蹤與協(xié)作。好的注釋能降低溝通成本，提升代碼維護(hù)效率。
快速PHP安裝教程
Jul 18, 2025 am 04:52 AM
ToinstallPHPquickly,useXAMPPonWindowsorHomebrewonmacOS.1.OnWindows,downloadandinstallXAMPP,selectcomponents,startApache,andplacefilesinhtdocs.2.Alternatively,manuallyinstallPHPfromphp.netandsetupaserverlikeApache.3.OnmacOS,installHomebrew,thenrun'bre
如何通過(guò)php中的索引訪問(wèn)字符串中的字符
Jul 12, 2025 am 03:15 AM
在PHP中獲取字符串特定索引字符可用方括號(hào)或花括號(hào)，但推薦方括號(hào)；索引從0開(kāi)始，超出范圍訪問(wèn)返回空值，不可賦值；處理多字節(jié)字符需用mb_substr。例如：$str="hello";echo$str[0];輸出h；而中文等字符需用mb_substr($str,1,1)獲取正確結(jié)果；實(shí)際應(yīng)用中循環(huán)訪問(wèn)前應(yīng)檢查字符串長(zhǎng)度，動(dòng)態(tài)字符串需驗(yàn)證有效性，多語(yǔ)言項(xiàng)目建議統(tǒng)一使用多字節(jié)安全函數(shù)。
學(xué)習(xí)PHP：初學(xué)者指南
Jul 18, 2025 am 04:54 AM
易于效率，啟動(dòng)啟動(dòng)tingupalocalserverenverenvirestoolslikexamppandacodeeditorlikevscode.1）installxamppforapache，mysql，andphp.2）uscodeeditorforsyntaxssupport.3）
