Question

经过十几项研究后，仍无法解决我在同一页面上显示两张图表的问题（Google Charts）。

我无法弄清楚出了什么问题，或者我忘记了什么，如果有人可以给我一些提示或指出我错过了什么，我会感激不尽。

我能够显示1张图表，但是当我尝试显示另一张图表时，第一张图表会消失。

这是我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

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


    //google.setOnLoadCallback(drawChartAtleta);
    //google.setOnLoadCallback(drawChartSexo);
    google.setOnLoadCallback(function () {
        drawChartAtleta();
        drawChartSexo();
    });      


    //Grafico Atleta por esporte
    function drawChartAtleta() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Esporte');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Basquete', 30],
          ['Tenis de Mesa', 17]
        ]);

        var options = {
            'title': 'Por Esporte',
            'width': 500,
            'height': 300
        };


        var chart = new google.visualization.CollumChart(document.getElementById('char_atleta'));
        chart.draw(data, options);
    }

    //Grafico por Sexo
    function drawChartSexo() {


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Sexo');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Masculino', 165],
          ['Feminino', 67]
        ]);


        var options = {
            'title': 'Por Sexo',
            'width': 500,
            'height': 300
        };


        var chart = new google.visualization.PieChart(document.getElementById('char_sexo'));
        chart.draw(data, options);
    }


</script>

<div class="container">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_sexo"></div>
            </div>                
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_atleta"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

您的脚本正在运行，您正在呼叫：google.visualization.CollumChart而不是google.visualization.ColumnChart，请始终在浏览器开发人员的控制台中检查javascript错误。（通常是f12）

查看Google图表文档，了解有关column charts

的更多信息

＆＃13;

<div class="container">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_sexo"></div>
            </div>                
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div id="char_atleta"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

          google.load('visualization', '1.0', { 'packages': ['corechart'] });


    //google.setOnLoadCallback(drawChartAtleta);
    //google.setOnLoadCallback(drawChartSexo);
    google.setOnLoadCallback(function () {
        drawChartAtleta();
        drawChartSexo();
    });      


    //Grafico Atleta por esporte
    function drawChartAtleta() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Esporte');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Basquete', 30],
          ['Tenis de Mesa', 17]
        ]);

        var options = {
            'title': 'Por Esporte',
            'width': 500,
            'height': 300
        };

        //This line was changed.
        var chart = new google.visualization.ColumnChart(document.getElementById('char_atleta'));
        chart.draw(data, options);
    }

    //Grafico por Sexo
    function drawChartSexo() {


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Sexo');
        data.addColumn('number', 'Quantidade');
        data.addRows([
          ['Masculino', 165],
          ['Feminino', 67]
        ]);


        var options = {
            'title': 'Por Sexo',
            'width': 500,
            'height': 300
        };


        var chart = new google.visualization.PieChart(document.getElementById('char_sexo'));
        chart.draw(data, options);
    }


</script>

＆＃13;

javascript - 如何在同一页面上加载两个谷歌图表，不同的div

1 个答案: