javascript – 单页上有多种类型的Google Charts

我想在一个页面上获取多种类型的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',[ 'Customer Apps',[ 'PC Support',0 ],[ 'Collections',[ 'Inventory',[ 'Billing',[ 'Executive',4 ],[ 'Customer Service',[ 'Sales and Marketing',[ 'Product and Development',[ 'Materials Management',[ 'Remittance',[ 'Support Services',[ 'Indirect Distribution',[ 'Provisioning Support',]);
 
        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'),[ new Date('2014,17'),15'),6 ],13'),12'),2 ],]);
 
        var options_testGraph2 = {
            title : 'Usage by department',backgroundColor : 'white',};
 
        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>

有任何想法吗？

解决方法

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

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

javascript – 单页上有多种类型的Google Charts

解决方法

猜你在找的JavaScript相关文章