谷歌餅圖

Question

用於添加3D餅圖（Google圖表）的JavaScript代碼。視圖中沒有顯示餅圖。如何解決？

使用Javascript：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        $(function() {
            <?php
                $bookingData = array();
                $i=0;
                foreach($bookingCounts as $booking){
                $bookingData[$i]['label'] = $booking['Name'];
                $bookingData[$i]['data'] = $booking['total'];
                $i++;
                }
            ?>
            var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
            console.log(data);

    var options = {
          title: 'Booking',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
        chart.draw(data, options);


});

我的觀點是：

<div class="flot-chart">
    <div class="flot-chart-content" id="flot-pie-chart">
    </div>
 </div>

Answer 1

您正在使用jQuery而不支持它（使用$()函數）; 快速解決方法是在主腳本之前添加此元素：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有關導入jQuery的更多信息 。

但是，如果這是你要使用的所有jQuery，我建議用$(function() { /* your code here */ } vanix JavaScript替換$(function() { /* your code here */ } ，例如：

document.addEventListener("DOMContentLoaded", function(event) { 
  /* your code here */
});

更多關於此 。

Answer 2

我注意到的一點是你似乎沒有添加列標題 。 只需在腳本標記中執行此操作即可：

 var data = new google.visualization.DataTable();
     data.addColumn('Type', 'ColName');
     data.addRows([ <?php PHP ?> ]); 

在我下面發布的代碼中，您需要做一些事情。

首先，您需要列標題。 其次，你需要做JSON_ENCODE和你的查詢。 第三，更改視圖，我的谷歌圖表只選擇行1,2和3，同時省略第0行。也明顯更改圖表類型。 最后在選項中添加is3D: true 。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
function drawChart(test_input) {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Test_Val_A');
        data.addColumn('number', 'Test_Val_B');
        data.addRows([
            <?php
                $dbName = "test_db";
                $config = parse_ini_file("myconfigfile.ini",true);
                $dbUser = $config["mydb"]["db_user"];
                $dbServer = $config["mydb"]["db_ip"];
                $dbPassword = $config["mydb"]["db_pass"];

                $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                if (!$con) {
                    die('Could not connect: ' . mysql_error());
                }

                mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * FROM MyTable where Name like '$test_input'");
                $output = array();

                while($row = mysql_fetch_array($sql)) {
                    // create a temp array to hold the data
                    $temp = array();

                    // add the data
                    $temp[] = '"' . $row['Name'] . '"';
                    $temp[] = '"' . $row['Date'] . '"';
                    $temp[] = (int) $row['Test_Val_A'];
                    $temp[] = (int) $row['Test_Val_B'];
                    // implode the temp array into a comma-separated list and add to the output array
                    $output[] = '[' . implode(', ', $temp) . ']';
                }
                // implode the output into a comma-newline separated list and echo
                echo implode(",\n", $output);

                mysql_close($con);
            ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: test_input}
        ]));
        view.setColumns([1,2,3]);

        var options = {
            tooltip: {
                trigger: 'both',
            },
            vAxis: { 'title': 'Volume' },
            hAxis: { slantedText: true},
            crosshair: { trigger: 'both'},
            width: 1900,
            height: 400
        };

        var chart = new google.visualization.LineChart(document.getElementById('Whatever_my_id_is'));
        chart.draw(view, options);
    }
</script>

Answer 3

使用Javascript：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    <?php
        $bookingData = array();
        $i=1;
        $bookingData[0][0] = 'Task';
        $bookingData[0][1] = 'Hours per Day';
        foreach($bookingCounts as $booking){
        $bookingData[$i][0] = $booking['Name'];
        $bookingData[$i][1] = $booking['total'];
        $i++;
        }
    ?>

    var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
    console.log(data);
    var data2 = google.visualization.arrayToDataTable(data);

    var options = {
      title: '',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
    chart.draw(data2, options);


};