javascript - 谷歌饼图

Question

添加 3D 饼图(Google 图表)的 JavaScript 代码。饼图未显示在 View 中。如何解决？

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 和查询。第三，更改 View ，我的 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>