Javascript 有可能在一个页面中有多个谷歌图表吗？_Javascript_Charts_Google Visualization

Javascript 有可能在一个页面中有多个谷歌图表吗？

javascript charts google-visualization

Javascript 有可能在一个页面中有多个谷歌图表吗？,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我正在使用谷歌可视化api。下面是我的示例代码。如果这两个图表中的任何一个是唯一要绘制的图表，则可以显示该图表。但我不能让这两者都起作用。谢谢你的建议 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> <title>Home

我正在使用谷歌可视化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>


主页
//加载可视化API和现成的Google表可视化
load（'visualization'，'1'，{'packages'：['corechart']}）；
函数drawA（）{
//使用setter定义图表：
var wrap=new google.visualization.ChartWrapper（）；
wrap.setChartType（'ColumnChart'）；
wrap.setDataSourceUrl（'dataurl'）；
wrap.setContainerId（'checkin-column'）；
setOptions（{'title'：'Daily Check-in number'，'width'：500，'height'：400}）；
wrap.draw（）；
wrap.getChart（）；
}
函数drawB（）{
//使用setter定义图表：
var wrap=new google.visualization.ChartWrapper（）；
wrap.setChartType（'ColumnChart'）；
wrap.setDataSourceUrl（'dataurl2'）；
wrap.setContainerId（'redemption-table'）；
setOptions（{'title'：'Redemption History'，'width'：500，'height'：400}）；
wrap.draw（）；
}
函数drawVisualization（）{
drawA（）；
drawB（）；
}
setOnLoadCallback（drawVisualization）；

问题出在您的div中

替换此项：

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

为此：

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

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

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

当你想在一个页面上绘制多个图表时，你必须为你的目标div使用不同的id（duh！）。因此，如果您的页面应该有多个图表，但只有1个（或N<预期值）正在呈现，请仔细检查每个图表是否有唯一的div id，以及JavaScript是否针对唯一的div id

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

<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>


load（'visualization'，'1'，{packages:['corechart']}）；
setOnLoadCallback（drawChart）；
setOnLoadCallback（drawChart2）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[''，'东西'，'东西2']，
['', 1.0, 2.0]
]);
变量选项={
标题：“我的图表”，
点数：3，
言辞：{
基线：0.1，
标题：“vAxis”
},
哈克斯：{
标题：“哈克斯”
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart'）；
图表绘制（数据、选项）；
}
函数drawChart2（）{
var data=google.visualization.arrayToDataTable([
[''，'东西'，'东西2']，
['', 4.0, 5.0]
]);
变量选项={
标题：“MyChart2”，
点数：3，
言辞：{
基线：0.1，
标题：“vAxis”
},
哈克斯：{
标题：“哈克斯”
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart'）；
图表绘制（数据、选项）；
}

您只调用了

wrap.getChart（）

和
这两个元素自动关闭。这可能在以前的“图像图表”API中应用过，但在JavaScript API中，您只需加载一次库，然后Google就无法显示您正在绘制的图表数量。事件如果多次调用google.load（）
，它将缓存库，并且不会对同一个包发出另一个请求。