如何使用 PHP 和 MySQL 從 Google Chart API 生成動態數據？

Question

我遇到了問題，需要幫助。 我可以在頁面加載時使用來自 MySQL 表的動態數據顯示來自 Google API 的水平柱狀圖。 但是，當我單擊按鈕並將數據發布到頁面時，即使我能夠在控制台的響應選項卡中看到腳本已正確生成，圖表也不會打印在 HTML 上。 但是，當我在檢查器中查看 HTML 時，我可以看到 JavaScript 在頁面上顯示為灰色，就像被注釋掉一樣。 我一直在撓頭幾個小時。 服務器端我正在使用 PHP。 客戶端我使用 Javascript/jQuery + HTML。 我怎樣才能解決這個問題？ 如果您有更好的方法來生成從 PHP 到 HTML 的圖表，我願意接受建議。

圖.html

<div id="chart_div1"></div>

查詢

$(document).on('click', '.view_sales_year_btn', function () {

    //collect variables
    var sales_year = $("#sales_year").find(":selected").val();

    var valuesf = "user_id=" + encodeURIComponent(user_id)
        + "&sales_year=" + encodeURIComponent(sales_year);

    if (sales_year !== '' || sales_year !== null && valuesf !== '') {

        $.ajax({
            type: "POST",
            url: "graph.php",
            dataType: 'json',
            data: valuesf,
            success: function (data) {

                //DISPLAY SALES GRAPH'
                $('#chart_div1').html(data.sales_graph);

            }
        });
    }
});

圖.php

//collect variables         
$user_id = mysqli_real_escape_string($conn,$_POST['user_id']);

if(isset($_POST['sales_year'])){
    //post year    
    $sales_year=mysqli_real_escape_string($conn,$_POST['sales_year']);
}else{
    $sales_year = date('Y');
}

//set title for graph 
$graph_title ='My Sales '.$sales_year;

//cleaning status 
$c_status = 'Booked';

//select all completed cleanings from user_schedule 
$user_schedule = $conn->prepare('SELECT cleaner_id, 
                                MONTH(cleaning_date) AS sales_month,
                                YEAR(cleaning_date) AS sales_year,
                                SUM(cleaning_price) AS total_sales
                    FROM user_schedule 
                    WHERE YEAR(cleaning_date)=?
                    AND cleaner_id=?
                    AND cleaning_status=?
                    GROUP BY DATE_FORMAT(cleaning_date, "%m-%Y")');
$user_schedule->bind_param('sss',$sales_year,$user_id,$c_status);
$user_schedule->execute();
$user_result = $user_schedule->get_result();

//iteration
if($user_result->num_rows>0){
    //declare variable 
    $my_sales = '';
    $my_sales .='<script type="text/javascript">';
    $my_sales .=" google.load('visualization', '1', {packages:['corechart']});
        google.setOnLoadCallback(drawChart1);
        function drawChart1(){
        var data = google.visualization.arrayToDataTable([
            ['Month', 'Sales'],";
    while($sales = $user_result->fetch_assoc()){
        //get month number
        $monthNum =$sales['sales_month'];

        //convert monh number to month name 
        $dateObj   = DateTime::createFromFormat('!m', $monthNum);
        $month = $dateObj->format('F'); // March

        //get first 3 characters from month 
        $this_month = substr($month, 0, 3);

        //select all completed cleanings from user_schedule 
        $total_month_sales = (int)$sales['total_sales']*0.35;

        //echo month with total sales 
        $my_sales .="['".$this_month."',  ".$total_month_sales."],";
    }
    $my_sales .= "]);

        var options = {
            title: '".$graph_title."',
            hAxis: {title: 'Amounts may differ from Stripe', titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
        }

        $(window).resize(function(){
            drawChart1();
        });
    </script>";

}else{
    $my_sales = '<h4 class="text-center alert alert-warning">You Have No Sales For '.$sales_year.' Yet.</h4>';
}

//return answer to json
$result = array('message' => 'success','sales_graph'=>$my_sales);
header('Content-Type: application/json');
echo json_encode($result);

Answer 1

只是向您的頁面添加一堆 Javascript 代碼實際上不會執行該代碼。 本質上，您的 AJAX 調用正在返回一些內容，然后您的 JS 將其插入到div ，然后……僅此而已。 瀏覽器不會嘗試運行那些東西。 即使你更新你的 JS 以嘗試運行你剛剛插入的東西，它也不會工作，因為瀏覽器甚至不知道新代碼的存在——它在頁面加載時不存在，當瀏覽器解析頁。 您必須首先eval()新代碼，這會引入一系列新問題。 這個問題是一個很好的參考，並描述了其中的一些。

退后一步，有一個更好的方法。

根據你的 JS 判斷，你的前端頁面有一個年份選擇器，所以你可以選擇例如 2019 並點擊你的“圖表”按鈕，並查看你 2019 年的銷售圖表。 因此，您真正要從 AJAX 中尋找的是圖形數據。 如果您更改年份並再次單擊該按鈕，您只需要一組新數據——您不需要再次加載 Google Charts JS 並初始化一個新圖表。

您的前端頁面可以包括您的 Google 圖表的所有設置和初始化，但沒有任何數據。 如果沒有數據，您當然還不能繪制它，因此一旦您加載了數據，您必須以其他方式觸發實際繪制。

PHP

因此，首先，更新您的 PHP，並刪除所有 Javascript。 您只需要返回一組月份/銷售額值：

$my_sales = [];
while ($sales = $user_result->fetch_assoc()) {
    // ... your code to set these variables up
    $my_sales[$this_month] = $total_month_sales;
}

刪除<script>標簽、所有與 Google Charts 相關的 JS、 drawChart1等 - 您的 AJAX 應該返回的唯一內容是 JSON 數據。 使用現有的 PHP 方法：

$result = array('message' => 'success', 'sales_graph' => $my_sales);
header('Content-Type: application/json');
echo json_encode($result);

HTML

接下來，將剛剛從 PHP 中刪除的 Charts JS 內容添加到前端的graph.html ：

google.load('visualization', '1', {packages: ['corechart']});

// Don't want to draw the chart on load any more, you will manually
// draw it once you have some data - so remove this line entirely
// google.setOnLoadCallback(drawChart1);

function drawChart1() {
    // ...
}

$(window).resize(function() {
   // ...
}

現在，對於實際繪制圖表的函數，您需要能夠為其提供一組要繪制的數據——即它需要接受一個參數：

// values will be the JSON data we got back from the AJAX call
function drawChart1(values) {

為了以正確的格式獲取我們從 AJAX 返回的 JSON 數據，仍有一些障礙需要跳過：

// Convert the JSON values to an array, as Google's DataTable
// requires that.
array = [];
for (var i in values) {
    array.push([i, values[i]]);
}

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addRows(array);

所以，現在您的 Google 圖表已全部設置完畢並准備就緒。 要繪制圖表，您需要獲取一些數據，並將其作為參數傳遞給drawChart1() 。 您可以從 AJAX success處理程序執行此操作：

success: function(response) {
    // response is the JSON data your PHP sends us.  Pass the 
    // 'sales_graph' element of it it to the function and have it
    // drawn!  You can also test that response.message is 'success'
    drawChart1(values.sales_graph);
}

這里有一些移動的部分，我已經跳了一些，但更清楚地看到它們一起工作，在行動中 -這是一個有效的 JSFiddle 。 請注意，它使用 JSFiddles echo來模擬您的 AJAX 調用 - 基本上我是在偽造您的 AJAX 請求並提供一些虛擬數據以返回。