单个页面上有多种类型的谷歌图表

Multiple types of Google Charts on single page

本文关键字：谷歌 类型 种类 单个页      更新时间：2023-09-26

我试图在一个页面上获得多种类型的谷歌图表。饼图和日历图。当我尝试这样做时，我会得到以下错误来代替饼图：

You called the draw() method with the wrong type of data rather than a DataTable or DataView

如果我一次只做一个图表，错误就会消失。而且总是顶部的购物车显示相同的错误。我能说的最好的是因为数据是不同类型的。。所以我认为这与干扰变量有关。我为每个图表的数据添加了一个uniqe标识符，但我仍然会遇到问题。。。

以下是我的PHP的HTML输出：

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1', {
        packages : [ 'corechart' ]
    });
    google.setOnLoadCallback(drawChart_testGraph);
    function drawChart_testGraph() {
        var data_testGraph = google.visualization.arrayToDataTable([
                [ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ],
                [ 'Customer Apps', 1 ], [ 'PC Support', 0 ],
                [ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ],
                [ 'Executive', 4 ], [ 'Customer Service', 0 ],
                [ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ],
                [ 'Materials Management', 0 ], [ 'Remittance', 0 ],
                [ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ],
                [ 'Provisioning Support', 1 ], ]);
        var options_testGraph = {
            title : 'Usage by department',
            backgroundColor : 'transparent',
            is3D : 'false',
        };
        var chart_testGraph = new google.visualization.PieChart(document
                .getElementById('testGraph'));
        chart_testGraph.draw(data_testGraph, options_testGraph);
        console.log(data_testGraph);
    }
</script>
<div id='testGraph' style='width: 900px; height: 500px;'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1.1', {
        packages : [ 'calendar' ]
    });
    google.setOnLoadCallback(drawChart_testGraph2);
    function drawChart_testGraph2() {
        var dataTable_testGraph2 = new google.visualization.DataTable();
        dataTable_testGraph2.addColumn({
            type : 'date',
            id : 'Department'
        });
        dataTable_testGraph2.addColumn({
            type : 'number',
            id : 'Count'
        });
        dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ],
                [ new Date('2014, 09, 17'), 1 ],
                [ new Date('2014, 09, 15'), 6 ],
                [ new Date('2014, 09, 13'), 1 ],
                [ new Date('2014, 09, 12'), 2 ], ]);
        var options_testGraph2 = {
            title : 'Usage by department',
            backgroundColor : 'white',
            is3D : 'false',
        };
        var chart_testGraph2 = new google.visualization.Calendar(document
                .getElementById('testGraph2'));
        chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2);
    }
</script>
<div id='testGraph2' style='width: 900px; height: 500px;'></div>
</div>

有什么想法吗？

这不是加载谷歌软件包的正确方法，您尝试加载谷歌可视化软件包两次，所以第二次加载会覆盖第一次。您需要删除第二次加载，只需在第一个脚本中同时加载：（或同时加载两次）

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

您可以支持旧版本。只需更改链接上js文件的版本号。

version':'1.1至version':'1

类似：<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

相关文章：