谷歌图表和谷歌表格不能同时显示 - Google charts and google table not displaying simultaneously

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

我的代码：

    <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

您已经定义了 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