javascript – 谷歌饼图

用于添加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>

解决方法:

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

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

More on importing jQuery.

但是,如果这是你要使用的所有jQuery,我建议用$vanix JavaScript替换$(function(){/ *你的代码* /},例如：

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

More on this.