最近，我嘗試在我一直在從事的專案中插入視覺化分析，並且我希望能夠從HTMLform中的UI創建圖形。我的HTML頁面的程式碼如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=de

以下內容均未經過測試，但可能會協助您找到解決方案。我建議不要以傳統方式提交表單，而是將 getData.php 和 HTML/javascript 完全分開。 getData.php 應該只執行 SQL 查詢並將資料傳回 ajax 回調，然後呼叫 drawChart 來實際建立圖表。 getData.php # 18000 ) ) ) { session_unset(); session_destroy(); exit( header('Location: ?timeout=true') ); } $_SESSION['LAST_ACTIVITY'] = time(); if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['attributes'], $_POST['charts'] )){ $pdo = new PDO( "mysql:host=$servername;dbname=$dbname", $username, $password ); $pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); $args=array(); # default, empty array if there are no placeholders $attributes = $_POST['attributes']; $charts = $_POST['charts']; /* create suitable SQL statement and $args array for each $attribute that you wish to plot on a chart. Use a Prepared statement to mitigate SQL injection attacks. */ switch( $attributes ){ case 'Patient_name': $sql='SELECT Patient_name, count(*) as number FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum WHERE Doctor_ID = :userid GROUP BY Patient_name'; $args=array( ':userid' => $userid ); break; /* test cases... */ case 'maps': $sql='select `county` as `name`, count(*) as `number` from `vwmaps` group by `county`'; break; case 'fish': $sql='select `family` as `name`, count(*) as `number` from `vwfishspecies` group by `species_order_id`'; break; /* etc etc */ } if( isset( $sql, $args ) ){ $stmt=$pdo->prepare( $sql ); if( $stmt ) { $stmt->execute( $args ); http_response_code( 200 ); exit( json_encode( $stmt->fetchAll( PDO::FETCH_OBJ ) ) ); } exit( http_response_code( 400 ) ); } # no sql to run... http_response_code( 400 ); } # only allow POST requests http_response_code( 404 ); ?> 以及 slim 版本的 HTML 頁面，沒有外部程式庫或 CSS，僅用於示範： #chart_div h3 span{color:red} sssccc sssccc Type of Chart Please select Pie chart Bar chart Column chart Area Line chart Scatter Chart Histogram Chart Select an Attribute Please select Map Fish Species Name ID Sex Race Age Email Phone Number Smoker Pregnant Comorbidities EDSS Score Onset Symptoms Onset Localisation MRI Enhanced Lesions MRI Enhanced Lesions Number MRI Onset Localisation Create Graph sssccc 進行了微小的更改並建立了測試頁面，運行應用程式產生了：

使用 HTML <form> 透過 Google Charts 建立圖表

最近，我嘗試在我一直在從事的專案中插入視覺化分析，並且我希望能夠從 HTML form 中的 UI 建立圖形。我的HTML頁面的程式碼如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Charts</title>

  <!-- Bootstrap CSS CDN -->
  
  <!-- Our Custom CSS -->
  <!-- Font Awesome JS -->
  <!--Load the AJAX --> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

  <div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
    // standard sidebar stuff
    </nav>

    <!-- Page Content  -->
    <div id="content">

      <form action="getData.php" method="POST" id="form">
        <table class="" id="chart-searching">

          <tr id="type_of_chart_row">
            
            <th>Type of Chart</th>
            <td colspan="3" class="">
              <select id="type_of_chart" name="charts">
                <option value="Pie_chart">Pie chart</option> 
                <option value="Bar_chart">Bar chart</option> 
                <option value="Col_chart">Column chart</option> 
                <option value="Area_chart">Area</option>
                <option value="Line_chart">Line chart</option>
                
              </select>
            </td>
          
            <th>Select an Attribute</th>

            <td colspan="3" id="attribute_row">
              <select id="attributes" name="attributes">
                <option value="Patient_name">Name</option>
                <option value="Patient_id">ID</option>
                <option value="Sex">Sex</option>
                <option value="Race">Race</option>
                <option value="Age">Age</option>
                <option value="Comorbidities">Comorbidities</option>
                <option value="Email">Email</option>
                <option value="eddsscore">EDSS Score</option>
                <option value="Phonenum">Phone Number</option>
                <option value="onsetsymptoms">Onset Symptoms</option>
                <option value="Onsetlocalisation">Onset Localisation</option>
                <option value="smoker">Smoker</option>
                <option value="Pregnant">Pregnant</option>
                <option value="MRIenhancing">MRI Enhanced Lesions</option>
                <option value="MRInum">MRI Enhanced Lesions Number</option>
                <option value="MRIonsetlocalisation">MRI Onset Localisation</option>
              </select>
            </td>

          </tr>
        </table>

        <button type="submit" name="makeGraph" value="Create Graph" id="test" onclick="">Create Graph</button>
      
      </form>
      
      
      <div id="chart_div"></div>

    </div>
  </div>
      
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  
  <script type="text/javascript">//sidebarCollapse
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>  
</body>
</html>

處理表單的檔案是getData.php

<?php
session_start();
error_reporting(0);
if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 18000)) {
  // last request was more than 30 minutes ago
  session_unset();     // unset $_SESSION variable for the run-time
  session_destroy();   // destroy session data in storage
  $scripttimedout = file_get_contents('timeout.js');
  echo "<script>" . $scripttimedout . "</script>";
} 
$_SESSION['LAST_ACTIVITY'] = time(); // update last activity time stamp?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>charts</title>
  <!-- Bootstrap CSS CDN -->
  <!-- Our Custom CSS -->
  <!-- Font Awesome JS -->
    <!--Load AJAX-->
    <script src="/MSR/application/jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      // google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.arrayToDataTable([
            
            ['Patient_name','number'],
            <?php 
              $sql = "SELECT Patient_name, count(*) as number FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
              $result = $pdo->query($sql);
              $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
              while($row = $result->fetch()){
                // $array[] = $row;
                  echo "['".$row['Patient_name']."',".$row['number']."],";
              }
            ?>
        ]);
        // data.addColumn('string', 'Topping');
        // data.addColumn('number', 'Slices');
        // data.addRows([
        //   ['Mushrooms', 3],
        //   ['Onions', 1],
        //   ['Olives', 1],
        //   ['Zucchini', 1],
        //   ['Pepperoni', 2]
        // ]);
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>

  <div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
    </nav>

    <!-- Page Content  -->
    <div id="content">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav ml-auto">
              <li class="navbar-nav">
                <a class="nav-link" id="">
                  <i class="fas fa-user"></i>
                  Doctor: <u><?php $user_name = $_SESSION['user'];
                                    
                              echo $user_name.$usersid; ?></u>
                </a>
                <a href="logout.php" onclick="return confirm('Are you sure to logout?');">
                  <button type="button" id="logoutBtn" class="navbar-btn btn btn-info">
                    <!-- <i class="fa fa-sign-out"></i> -->
                    <span>Logout</span>
                  </button>
                </a>
              </li>
            </ul>
          </div>

        <div id="chart_div"></div>

      <footer>
      </footer>
    </div>
  </div>
     
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  
  <script type="text/javascript">//sidebarCollapse
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>
     
</body>

</html>

<?php

    //database connection info (this part works fine)
            
      $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
      // set the PDO error mode to exception
      $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


    // get data from the form
        $createGraph = $_POST['makeGraph'];
        $attributes = $_POST['attributes'];
        $charts = $_POST['charts'];

        if (isset($_POST['makeGraph'])) {
          try {
              $array = array();
              if ($charts == 'Pie_chart'){
                  if($attributes == 'Patient_name'){
                      $sql = "SELECT Patient_name, count(*) as number 
                      FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum 
                      WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
                      $result = $pdo->query($sql);
                      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
                      while($row = $result->fetch()){
                        $array[] = $row;
                      }
                      $jsonArray = json_encode($array,JSON_PRETTY_PRINT);
                      echo $jsonArray;  
                  }
             // hoping to make something similar in the if statements with the rest of the attributes (email-sex-Race etc...)
              
          } catch (PDOException $e) {
            echo"<div class='error'>";
              echo $statement . "<br>" . $e->getMessage();
              die("ERROR: Could not able to execute $sql. " . $e->getMessage());
            echo "</div>";
          }
        }
?>

我的目標是讓使用者在第一頁的html形式中輸入他想要的圖表類型和屬性，然後讓第二頁處理請求並列印圖表。

我知道我發布了很多程式碼，但我已經與這個問題鬥爭了 3 天，歡迎任何幫助！

編輯我加入了定義 $_SESSION['LAST_ACTIVITY'] = time(); 和 $usersid 的部分。

問題是我似乎無法找到一種方法從表單中獲取資料並使用它們來建立圖表。當我創建

<?php 
$sql = "SELECT Patient_name, count(*) as number FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
$result = $pdo->query($sql);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
while($row = $result->fetch()){
// $array[] = $row;
   echo "['".$row['Patient_name']."',".$row['number']."],";
}?>

drawChart() 函數內的標記我的整個 getData.php 頁面完全變成白色。我知道這不是解釋我的問題的好方法，但我盡力了。請向我詢問您需要的任何解釋。

編輯2

在@Professor Abronsius 回答更改後，我可以列印餅圖，不幸的是它看起來像這樣：

當我嘗試查看網路流量以找出 json 檔案的樣子時，該檔案看起來不錯：

0   Object { name: "Name1", number: "1" }
1   Object { name: "Name2", number: "1" }
2   Object { name: "Name3", number: "1" }
3   Object { name: "Name4", number: "1" }
4   Object { name: "Name5", number: "1" }
5   Object { name: "name6", number: "1" }
6   Object { name: "Name7", number: "1" }
7   Object { name: "Name8", number: "1" }

這意味著應該列印一個具有相等部分的餅圖..有什麼想法嗎？

編輯3

產生圖表時，以及在下列行新增 console.log() 後，控制台中沒有錯誤：

Object.keys( json ).forEach(key=>{
                console.log(dataTbl.addRow( [ json[ key ].name, json[ key ].number ] ));
                
            })

控制台中的輸出如下（我不明白它是對還是錯）：

Object { cq: null, bf: (2) […], Wf: (1) […], Br: null, cache: [], version: "0.6" }

Br: null

Wf: Array(8) [ {…}, {…}, {…}, … ]

0: Object { c: (2) […] }

c: Array [ {…}, {…} ]

0: Object { v: "Athanasia Moutlia" }

1: Object { v: "1" }

length: 2

<prototype>: Array []

<prototype>: Object { … }

1: Object { c: (2) […] }

2: Object { c: (2) […] }

3: Object { c: (2) […] }

4: Object { c: (2) […] }

5: Object { c: (2) […] }

6: Object { c: (2) […] }

7: Object { c: (2) […] }

length: 8

<prototype>: Array []

bf: Array [ {…}, {…} ]

cache: Array(8) [ (2) […], (2) […], (2) […], … ]

cq: null

version: "0.6"

<prototype>: Object { constructor: gvjs_M(a, b), ca: ca(), "$": $()
, … }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (2) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (3) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (4) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (5) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (6) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (7) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (8) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13

在層內：wf->0->c && 緩存，我可以看到我期望填充 dataTbl 的數據，但我不知道其餘的是什麼...

提前謝謝您！

getData.php 檔案的 PasteBin 連結

html-form.php 檔案的 PasteBin 連結

P粉135799949314 天前435

使用 HTML <form> 透過 Google Charts 建立圖表

全部回覆(1)我來回復

getData.php