谷歌饼图

Question

添加 3D 饼图（谷歌图表）的 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

我注意到您似乎没有添加列标题。只需在您的脚本标签中执行此操作即可：

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

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

首先，您需要列标题。其次，您需要执行 JSON_ENCODE 和您的查询。第三，更改视图，我的 google 图表只选择第 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 2

您正在使用 jQuery 而不支持它（使用 $() 函数）；一个快速的解决方法是在你的主脚本之前添加这个元素：

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

More on importing jQuery.

但是，如果这就是您要使用的全部 jQuery，我建议将 $(function() { /* your code here */ } 替换为原生 JavaScript 替代方案，例如：

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

More on this.

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


};