一页可以有多个谷歌图表吗？答案

【问题标题】：is it possible to have multiple google charts in one page?一页可以有多个谷歌图表吗？
【发布时间】：2011-10-06 05:32:51
【问题描述】：

我正在使用 Google 可视化 api。以下是我的示例代码。如果是唯一要绘制的，则可以显示两个图表中的任何一个。但我不能同时工作。谢谢你的建议。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title>Home Page</title>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //Load the Visualization API and the ready-made Google table visualization
            google.load('visualization', '1', {'packages':['corechart']});
        </script>

        <script type='text/javascript'>

            function drawA() {
                // Define the chart using setters:
                var wrap = new google.visualization.ChartWrapper();
                wrap.setChartType('ColumnChart');
                wrap.setDataSourceUrl('dataurl');
                wrap.setContainerId('checkin-column');
                wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
                wrap.draw();
                wrap.getChart();
            }

            function drawB() {
                // Define the chart using setters:
                var wrap = new google.visualization.ChartWrapper();
                wrap.setChartType('ColumnChart');
                wrap.setDataSourceUrl('dataurl2');
                wrap.setContainerId('redemption-table');
                wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
                wrap.draw();
            }



            function drawVisualization() {
               drawA();
                drawB();

            }


            google.setOnLoadCallback(drawVisualization);
        </script>
    </head>
    <body>



        <div id="checkin-column"/>
        <p/>
        <div id="redemption-table"/>

    </body>
</html>

【问题讨论】：

你只是在drawA()中调用wrap.getChart();
@Joe：没关系。只是为了调试。

标签： javascript charts google-visualization

【解决方案1】：

问题出在您的 div 中。

替换这个：

<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>

有了这个：

<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>

【讨论】：

我几分钟前才发现这个问题。为什么这是问题？对我来说，
是一个正确关闭的标签。
好的。因为
元素是一个非空元素，所以基于这个stackoverflow.com/questions/5455768/… 并不是要自闭的
确切地说是<div> 和<p>。

【解决方案2】：

可能不是您的问题，但在相关说明中，我发现如果您在同一页面上有很多 Google 可视化（我相信它在 50 左右），Google 将限制使用，并停止正确渲染。

【讨论】：

这可能以前使用旧的“图像图表”API 应用，但使用 JavaScript API，您加载库一次，然后 Google 无法指示您绘制了多少图表。事件如果你多次调用google.load()，它会缓存库并且不会对同一个包再次请求。

【解决方案3】：

只是抛出一些与我遇到的问题相关的信息（不是 OP 的确切 Q）。

当你想在一个页面上绘制多个图表时，你必须为你的定位的 div 使用不同的 id (duh!)。因此，如果您的页面应该有多个图表，但只有 1 个（或 N

例如，以下将只呈现一个图表：

<div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawChart2);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['', 'Stuff', 'Stuff2'],
            ['', 1.0, 2.0]
        ]);

        var options = {
            title: 'MyChart',
            pointSize: 3,
            vAxis: {
                baseline: 0.1,
                title: 'vAxis'
            },
            hAxis: {
                title: 'hAxis'
            }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
        chart.draw(data, options);
    }

        function drawChart2() {
            var data = google.visualization.arrayToDataTable([
                ['', 'Stuff', 'Stuff2'],
                ['', 4.0, 5.0]
            ]);

            var options = {
                title: 'MyChart2',
                pointSize: 3,
                vAxis: {
                    baseline: 0.1,
                    title: 'vAxis'
                },
                hAxis: {
                    title: 'hAxis'
                }
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            chart.draw(data, options);
        }
    </script>

【讨论】：