php - 在 PHP MYSQL 中使用 Google Chart

Question

我必须显示 1 个用户拥有多少个帐户和余额。我必须在表格和饼图上显示数据。我从 Google Chart 创建了一个饼图。但是，我一直坚持使用 PHP 为饼图插入数据。请帮忙! :(

 <tr>
                        <th>Account Type</th>
                        <th>Account Number</th>
                        <th>Account Balance</th>
                    </tr>
                </thead>
                    <?php
                    $query = "SELECT * FROM account WHERE user_id='$user_id'";
                    $result = mysqli_query($link, $query) or die(mysqli_error($link));
                    while ($row = mysqli_fetch_array($result)) {
                        $acc_type = $row ['account_type'];
                        $acc_num = $row ['account_number'];  
                        $acc_bal = $row ['account_balance']; 

                        ?>
                    <tbody>
                        <tr>
                            <td><?php echo $acc_type ?></td>
                            <td><?php echo $acc_num ?></td>
                            <td>S$ <?php echo $acc_bal ?></td>
                        <?php
                    }


                    ?> 
                        </tr>
                </tbody>  
                <tr class="alt">
                    <?php 
                    $query = "SELECT SUM(account_balance) AS account_total FROM account WHERE user_id='$user_id'";
                    $result = mysqli_query($link, $query) or die(mysqli_error($link));
                    while ($row = mysqli_fetch_array($result)){
                        $acc_total = $row ['account_total'];
                    ?>
                    <td colspan="2" align="right"><b>Total: </b></td>
                    <td align="right"><b>S$ <?php echo $acc_total ?> </b></td>
                    <?php
                    }
                    ?>

                </tr>  
            </table>

                </center>

    // creating pie Chart
                    <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

          // Load the Visualization API and the piechart package.
          google.load('visualization', '1.0', {'packages':['corechart']});

          // Set a callback to run when the Google Visualization API is loaded.
          google.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. (and I think this is where I go wrong)
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Accounts');
            data.addColumn('number', 'Balance');
            data.addRows([

               ['<?php echo $acc_type; ?>', <?php echo $acc_bal; ?>],
               ['<?php echo $acc_type; ?>', <?php echo $acc_bal; ?>],   
            ]);

            // Set chart options
            var options = {'title':'Account Balance',
                           '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>

        <!--Div that will hold the pie chart-->
        <div id="chart_div"></div>

Answer 1

要获得帐户类型和余额的饼图，您需要在第一个 while 循环中添加一些代码:

$pieData = array();
while ($row = mysqli_fetch_array($result)) {
    $acc_type = $row ['account_type'];
    $acc_num = $row ['account_number'];  
    $acc_bal = $row ['account_balance'];
    $pieData[] = array($row['account_type'], $row['account_balance']);
    //...
}

然后在 javascript 中，输出 $pieData 数组:

data.addRows(<?php echo json_encode($pieData, JSON_NUMERIC_CHECK); ?>);