ホームページ >バックエンド開発 >PHPチュートリアル >PHP、MySQL、JSON を使用して Google チャート (円、棒、縦棒、表) を生成する方法
PHP、MySQL、JSON を使用して Google チャート (円、棒、縦棒、表) を生成する方法
- Linda Hamiltonオリジナル
- 2024-11-16 14:03:02644ブラウズ
PHP MySQL Google Chart JSON - 完全な例
MySQL テーブル データをデータ ソースとして使用して Google Chart を生成する例をたくさん見つけました。数日間検索したところ、PHP と MySQL を使用して Google チャート (円グラフ、棒グラフ、棒グラフ、表) を生成する例がインターネット上にほとんどないことがわかりました。ついに動作する例を見つけました。
これまでStackOverflowには大変お世話になったので、今回は恩返ししたいと思います。
例は 2 つあります。1 つは Ajax を使用したもの、もう 1 つは使用しないものです。今日は、Ajax 以外の例のみを示します。
使用法:
- 要件: PHP、Apache、MySQL
-
インストール:
- phpMyAdmin を使用してデータベースを作成し、「chart」という名前を付けます
- phpMyAdmin を使用してテーブルを作成し、「googlechart」という名前を付けます。列を 2 つ使用したため、列が 2 つだけであることを確認します。ただし、さらに多くの列を使用する場合は、指示に従ってコードに若干の変更を加えることができます。
- 次のように列名を指定します: "weekly_task" と "percentage"
- テーブル 一部のデータでは、フィールド "_percentage_" に数値のみを使用できます
PHP-MySQL-JSON-Google チャートの例:
<?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 チャートの例:
<?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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。