是否有可能在一个页面中有多个谷歌图表？

Question

是否有可能在一个页面中有多个谷歌图表？

Bob*_*obo 10 javascript charts google-visualization

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 12

问题出在你的div中.

替换这个:

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

Run Code Online (Sandbox Code Playgroud)

有了这个:

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

Run Code Online (Sandbox Code Playgroud)

好.这是因为<div>元素是一个非void元素,所以它并不意味着基于此http://stackoverflow.com/questions/5455768/browsers-think-div-not-ending自行关闭 (4认同)

归档时间：	14 年，4 月前
查看次数：	23190 次
最近记录：	12 年，10 月前