如何使用 PHP、MySQL 和 JSON 生成 Google 图表（饼图、条形图、柱形图和表格）？
- Linda Hamilton原创
- 2024-11-16 14:03:02644浏览
PHP MySQL Google Chart JSON - 完整范例
使用 MySQL 资料表资料作为资料来源来产生 Google Chart，我找了很多范例。我找了几天，发现网路上很少有使用 PHP 和 MySQL 的范例来产生 Google Chart (圆饼图、长条图、直条图、表格)。我最后终于找到一个范例可以执行。
我之前已经从 StackOverflow 获得了很多帮助，所以我这次也要回馈。
我有两个范例，一个使用 Ajax 一个则没有。今天，我只会展示非 Ajax 的范例。
使用方式：
- 需求：PHP、Apache 及MySQL
-
安装：
- 使用phpMyAdmin 建立一个资料库，并将其命名为"chart"
- 使用phpMyAdmin 建立一个表格，并将其命名为"googlechart"，并确保它只有两栏，因为我使用了两栏。不过，如果你想用更多栏，也可以按照指示对程式码做些微的修改
- 指定栏位名称如下："weekly_task" 和"percentage"
- 在表格中插入一些资料，栏位"_percentage_" 中只能使用数字
PHP-MySQL-JSON-Google Chart 的范例：
<?php
$con=mysql_connect("localhost","Username","Password") or die("Failed to connect with database!!!!");
mysql_select_db("資料庫名稱", $con);
// Google Chart 表格包含兩個欄位，分別是 weekly_task 和 percentage
// 這個範例將顯示一個圓餅圖，如果你需要其他的圖表例如長條圖，你必須對程式碼做一些微幅的調整，才能與長條圖或其他圖表搭配
$sth = mysql_query("SELECT * FROM chart");
/*
---------------------------
範例資料：表格 (Chart)
--------------------------
weekly_task percentage
Sleep 30
Watching Movie 40
work 44
*/
// flag 不需要
$flag = true;
$table = array();
$table['cols'] = array(
// 圖表的標籤，代表欄位標題
// 注意，一個欄位使用 "string" 格式，另一個使用 "number" 格式，因為圓餅圖只使用 "數字" 來計算百分比，字串則用於欄位標題
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']);
// 每一個分塊的值
$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">
// 載入視覺化 API 及圓餅圖套件。
google.load('visualization', '1', {'packages':['corechart']});
// 設定一個 callback 在 Google Visualization API 載入時執行。
google.setOnLoadCallback(drawChart);
function drawChart() {
// 從伺服器載入的 JSON 資料中，建立我們的資料表格。
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '我的每週計畫',
is3D: 'true',
width: 800,
height: 600
};
// 使用部分選項，實例化並繪製我們的圖表。
// 別忘了檢查你的 div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--這是會放置圓餅圖的 div-->
<div>PHP-PDO-JSON-MySQL-Google Chart 的范例：
<?php
/*
指令碼 : PHP-PDO-JSON-mysql-googlechart
作者 : Enam Hossain
版本 : 1.0
*/
/*
--------------------------------------------------------------------
使用方式：
--------------------------------------------------------------------
需求：PHP、Apache 及 MySQL
安裝：
--- 使用 phpMyAdmin 建立一個資料庫，並將其命名為 "chart"
--- 使用 phpMyAdmin 建立一個表格，並將其命名為 "googlechart"，並確保它只有兩欄，因為我使用了兩欄。不過，如果你想用更多欄，也可以按照指示對程式碼做些微的修改
--- 指定欄位名稱如下："weekly_task" 和 "percentage"
--- 在表格中插入一些資料
--- _percentage_ 欄位只能使用數字
---------------------------------
範例資料：表格 (googlechart)
---------------------------------
weekly_task percentage
----------- ----------
Sleep 30
Watching Movie 10
job 40
Exercise 20
*/
/* 資料庫名稱 */
$dbname = 'chart';
/* 資料庫使用者名稱與密碼 */
$username = 'root';
$password = '123456';
try {
/* 建立資料庫連線 */
$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');
/*
---------------------------
範例資料：表格 (googlechart)
--------------------------
weekly_task percentage
Sleep 30
Watching Movie 10
job 40
Exercise 20
*/
$rows = array();
$table = array();
$table['cols'] = array(
// 圖表的標籤，代表欄位標題。
/*
注意，一個欄位使用 "string" 格式，另一個使用 "number" 格式，因為圓餅圖只使用 "數字" 來計算百分比，字串則用於分塊標題
*/
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']);
// 每一個分塊的值
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// 將資料轉換成 JSON 格式
$jsonTable = json_encode($table);
//echo $jsonTable;
} catch(PDOException $e) {
echo '錯誤：' . $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">
// 載入視覺化 API 及圓餅圖套件。
google.load('visualization', '1', {'packages':['corechart']});
// 設定一個 callback 在 Google Visualization API 載入時執行。
google.setOnLoadCallback(drawChart);
function drawChart() {
// 從伺服器載入的 JSON 資料中，建立我們的資料表格。
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '我的每週計畫',
is3D: 'true',
width: 800,以上是如何使用 PHP、MySQL 和 JSON 生成 Google 图表（饼图、条形图、柱形图和表格）？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn