单页上有多种类型的Google Charts

Question

我想在一个页面上获取多种类型的Google Charts.饼图和日历图表.当我尝试这样做时,我得到以下错误代替饼图:

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>

有任何想法吗？

Answer 1

这不是加载谷歌软件包的正确方法,你试图加载谷歌可视化软件包2次,所以第二个是覆盖第一个.您需要删除第二个加载并在第一个脚本中加载:(或加载两次)

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