찾다

집  >  기사  >  백엔드 개발  >  PHP, MySQL 및 JSON을 사용하여 Google 차트(원형, 막대, 열 및 테이블)를 생성하는 방법은 무엇입니까?

PHP, MySQL 및 JSON을 사용하여 Google 차트(원형, 막대, 열 및 테이블)를 생성하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-16 14:03:02564검색

How to Generate Google Charts (Pie, Bar, Column, and Table) Using PHP, MySQL, and JSON?

PHP MySQL Google Chart JSON - 전체 예제

MySQL 테이블 데이터를 데이터 소스로 사용하여 Google 차트를 생성하면서 많은 예제를 발견했습니다. 며칠 동안 검색한 결과 PHP와 MySQL을 사용하여 Google 차트(파이 차트, 막대 차트, 막대 차트, 테이블)를 생성하는 예제가 인터넷에 거의 없다는 것을 알았습니다. 마침내 작동하는 예제를 찾았습니다.

이전에도 StackOverflow에서 많은 도움을 받았는데 이번에는 보답하고 싶습니다.

Ajax가 있는 예와 없는 예가 두 개 있습니다. 오늘은 Ajax가 아닌 예제만 보여드리겠습니다.

사용:

  • 요구 사항: PHP, Apache 및 MySQL

  • 설치:

    • phpMyAdmin을 사용하여 데이터베이스를 만들고 이름을 "chart"
    • phpMyAdmin을 사용하여 테이블을 만들고 이름을 "googlechart"로 지정하고 두 개의 열을 사용했기 때문에 두 개의 열만 있는지 확인하세요. 그러나 더 많은 열을 사용하려면 지침에 따라 코드를 약간 수정할 수도 있습니다.
    • 열 이름을 다음과 같이 지정합니다: "weekly_task" 및 "percentage"
    • table 일부 데이터의 경우 "_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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php mysql json ajax pdo using column table apache phpMyAdmin
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP에서 배열의 반복되지 않는 모든 하위 집합을 효율적으로 찾는 방법은 무엇입니까?다음 기사：PHP에서 배열의 반복되지 않는 모든 하위 집합을 효율적으로 찾는 방법은 무엇입니까?

관련 기사

더보기