谷歌图表和谷歌表格不同时显示答案

【问题标题】：Google charts and google table not displaying simultaneously谷歌图表和谷歌表格不同时显示
【发布时间】：2016-03-08 11:43:51
【问题描述】：

我正在为我的项目使用谷歌图表和谷歌表格。问题是，我无法在一个页面上显示两个谷歌图表和一个谷歌表格。怎么解决？

我的代码：

    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {'packages': ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(<?= $jsonTable ?>);
            var options = {
                title: ' Audit Schedule ',
                is3D: 'true',
                width: 500,
                height: 250


            };
            // Instantiate and draw our chart, passing in some options.
            // Do not forget to check your div ID
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }
    </script>


    <script type="text/javascript">
        google.charts.load('current', {'packages': ['corechart']});
        google.charts.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',
                width: 501.2,
                height: 250
            };

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

            chart.draw(data, options);
        }

    </script>


    <script type="text/javascript">
        google.charts.load('current', {'packages': ['table']});
        google.charts.setOnLoadCallback(drawTable);

        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
                ['Mike', {v: 10000, f: '$10,000'}, true],
                ['Jim', {v: 8000, f: '$8,000'}, false],
                ['Alice', {v: 12500, f: '$12,500'}, true],
                ['Bob', {v: 7000, f: '$7,000'}, true]
            ]);

            var table = new google.visualization.Table(document.getElementById('table_div'));

            table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
        }
    </script>

//html代码

                                    <div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>

                                    <div class="chart-wrapper">
                                        <div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
                                    </div><br>

                                    <div id="table_div"></div>

谷歌图表链接：https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

【问题讨论】：

显示您的代码。你尝试了什么？
我刚刚编辑了我的问题。代码在那里。

标签： javascript php jquery google-visualization

【解决方案1】：

您已经定义了 google.charts.setOnLoadCallback() 的多个实例。这个函数应该只在你的代码中定义一次，否则你每次都会覆盖回调事件。不管怎样，你应该把你所有的图表绘制函数都包装成这样的东西：

  function drawCharts(){
     drawchart1();
     drawchart2(); 
     drawwhateveryouwant(); 
  }

  google.setOnLoadCallback(drawCharts);

另外，我可能不得不指出你有两个同名的函数^^，你可能想要更正它。除此之外，您可能希望通过这样做一次调用所有图表包，因为我还注意到您两次加载同一个包，即使它不会阻止您的代码正常运行，这也是一种资源浪费：

 google.load('visualization', '1', {'packages': ['corechart','table']});

我稍微修改了您的代码以帮助您实现预期的结果：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
    <div id="piechart"></div>
    <div id="table_div"></div>
</body>
<script>

google.charts.setOnLoadCallback(init);
google.charts.load('current', {'packages':['corechart','table']});

//Function to draw piechart 
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',
        width: 501.2,
        height: 250
    };

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

    chart.draw(data, options);
};

//Function to draw table 
function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Mike', {v: 10000, f: '$10,000'}, true],
        ['Jim', {v: 8000, f: '$8,000'}, false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob', {v: 7000, f: '$7,000'}, true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

//Function to initialize everything 
function init(){

    drawTable(); 
    drawChart();

}

</script>
</html>

你会原谅我跳过带有 JSON 数据的图表：p

【讨论】：