javascript - 如何使用 PHP 和 MySQL 从 Google Chart API 生成动态数据？

Question

我遇到了问题，需要帮助。我能够在页面加载时显示来自 Google API 的水平柱形图以及来自 MySQL 表的动态数据。 但是当我单击按钮并将数据发布到页面时，图表不会打印在 HTML 上，即使我可以在控制台的响应选项卡中看到脚本已已正确生成。然而，当我在检查器中查看 HTML 时，我可以看到 JavaScript 在页面上显示为灰色，就像被注释掉一样。我已经挠头好几个小时了。服务器端我使用PHP。客户端我使用 Javascript/jQuery + HTML。我怎样才能解决这个问题？如果您有更好的方法来生成从 PHP 到 HTML 的图表，我愿意接受建议。

graph.html

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

jquery

$(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);

            }
        });
    }
});

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()新代码引入了一系列新问题。 This question is a good reference并描述了其中一些。

不过退一步来说，还有更好的方法。

从你的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);
}

这里有一些移动的部分，我已经跳了一点，但是更清楚地看到它们一起工作、运行 - here's a working JSFiddle 。请注意，它使用 JSFiddles echo模拟您的 AJAX 调用 - 基本上我是在伪造您的 AJAX 请求并提供一些虚拟数据来取回。