Question

我能够开箱即用（https://developers.google.com/chart/interactive/docs/gallery/piechart）绘制下面的图表，但是当我尝试通过点击按钮后通过jquery加载它时它不起作用。我在stackoverflow和互联网的其他地方阅读了很多问题/答案，但不知怎的，他们对我没有帮助，我无法解决问题。单击按钮后，屏幕上不会绘制任何内容。

这是我尝试的最后一个代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>

            $(document).ready(function(){
                $(".btn").click(function(){


                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);

                    function drawChart() {

                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Work',     11],
                            ['Eat',      2],
                            ['Commute',  2],
                            ['Watch TV', 2],
                            ['Sleep',    7]
                        ]);

                        var options = {
                            title: 'My Daily Activities'
                        };

                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                        chart.draw(data, options);
                    }


                });
            });
        </script>
    </head>
    <body>

        <button class="btn">Plot chart!</button>
        <div id="piechart" class="piechart">Chart would be plotted here</div>

    </body>
</html>

我将不胜感激任何帮助！

Answer 1

非常简短地看一下，我说问题出在以下几行：

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

您的标记中似乎没有ID piechart的元素。请尝试使用此行：

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

作为参考，这不是一个jQuery AJAX调用，而是一个事件处理程序。

编辑：您还（非常关键）未加入Google Charts API：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

编辑2：是的，我现在实际上有一个游戏，这应该可以解决问题：http://codepen.io/OneToughCookie/pen/WbNyVg

问题在于将google.setOnLoadCallback函数与jQuery的$（document）.ready函数一起使用。有关详细信息，请参阅：google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

google.load函数有一个可以用来代替setOnLoadCallback的回调参数，如：

google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

Answer 2

在这种情况下我们不能忘记以下参数：“回调”：**包后的drawChart：[“corechart”] ** in

google.load（“visual”，“1”，{packages：[“corechart”]}）;

这里是完整的代码。这样就可以了：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>

            $(document).ready(function(){
                $(".btn").click(function(){

                    google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
                    google.setOnLoadCallback(drawChart);

                    function drawChart() {

                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Work',     11],
                            ['Eat',      2],
                            ['Commute',  2],
                            ['Watch TV', 2],
                            ['Sleep',    7]
                        ]);

                        var options = {

                            chartArea: {width:'100%',height:'100%'},

                            forceIFrame: 'false',

                            is3D: 'true',

                            pieSliceText: 'value',

                            sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.

                            titlePosition: 'none'

                        };


                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                        chart.draw(data, options);
                    }


                });
            });
        </script>
    </head>
    <body>

        <button class="btn">Plot chart!</button>
        <div id="piechart" style="width: 900px; height: 500px;">The chart would be plotted here.</div>

    </body>
</html>

谢谢大家的帮助！

如何使用jquery单击按钮后绘制谷歌图表

2 个答案: