2017-09-14 92 views
2

我想讓莫里斯甜甜圈圖和原因不明我得到空白頁。我有兩個單獨的文件,Chart.php包含sql語句,然後是用於顯示圖表的郵件文件。動態莫里斯甜甜圈圖與php的mysql

Chart.php代碼

try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
members GROUP BY gender ORDER BY memberID ASC "); 
     $stmt->execute(); 
     } 
    catch(PDOException $e) { 
     echo '<p class="bg-danger">'.$e->getMessage().'</p>'; 
     } 

    $data = array(); 

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
     $array[] = array(
      'lable' => $row['gender'], 
      'value' => $row['no_of_gender'] 
     ); 
     } 

$data = json_encode($data); 

這裏是我用來接收$ DATA Chart.php

<script type="text/javascript" language="javascript" > 

     $(document).ready(function(){ 

     var donut_chart = Morris.Donut({ 
      url :"charts.php", 
      element: 'chart', 
      data: <?php echo $data; ?> 
       }); 
      }) 

    </script> 
+0

你能分享你看到什麼樣的錯誤?如果你得到一個空白頁面,你的JavaScript控制檯說什麼?得到的頁面的來源是什麼? – tristansokol

+0

@tristansokol正在獲取未定義變量:數據 –

回答

1

在chart.php文件要在編碼空數組JavaScript代碼。

更換

$data = json_encode($data); 

$data = json_encode($array); 

,並確保你正確地傳遞$數據從chart.php文件中的JavaScript代碼。

的工作代碼如下

<html> 
<head> 
    // if you have downloaded these files to your project, change the path to include them. 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
</head> 
<body> 

<?php 
try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
members GROUP BY gender ORDER BY memberID ASC "); 
     $stmt->execute(); 
     } 
    catch(PDOException $e) { 
     echo '<p class="bg-danger">'.$e->getMessage().'</p>'; 
     } 

    $data = array(); // define array 

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
     $data[] = array(
      'lable' => $row['gender'], 
      'value' => $row['no_of_gender'] 
     ); 
     } 

//print_r($data); // to check the array data 
$json_data = json_encode($data); // convert to json array 
?> 
<div id="chart" style="height: 250px;"></div> 

<script type="application/javascript"> 

    Morris.Donut({ 
     element: 'chart', // div id 
     data: <?php echo $json_data; ?>, 
     xkey: 'lable', 
     ykeys: ['value'], 
     labels: ['Value'] 
    }); 

</script> 


</body> 
</html> 
+0

正在獲取未定義變量:數據 –

+0

Javascript代碼應該位於chart.php文件中。 –

+0

更新答案以包含單個頁面中的所有內容。 –