谷歌图表绘制()方法错误类型时给定数据表

我试图使用 HTML 和 Javascript 在 Google 图表中显示带有范围过滤器的折线图，但每当我运行 draw() 函数时，代码都会告诉我我为 draw() 参数使用了错误的数据类型（它应该是一个DataTable）。但是，我使用 arrayToDataTable() 构建我的数据，根据 Google 图表 API 文档，它会创建一个数据表。这是我的完整代码：

<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            //Chart data
            google.charts.load('current',{'packages':['controls']});
            google.charts.setOnLoadCallback(drawDashboard);
            function drawDashboard(){
                var dataSet = google.visualization.arrayToDataTable([
                    [{label:'date',type:'datetime'},{label:'Bytes from network:Bytes to network',type:'number'}],
                    [new Date(2016,01,23,00,00),1.0],
                    [new Date(2016,01,23,01,00),1.0075187969924813],
                    [new Date(2016,01,23,03,00),1.126865671641791],
                    [new Date(2016,01,24,22,00),0.987012987012987],
                    [new Date(2016,01,25,01,00),1.0],
                    [new Date(2016,01,25,02,00),0.9166666666666666],
                    [new Date(2016,01,25,10,00),1.0],
                    [new Date(2016,01,26,12,00),1.0],
                    [new Date(2016,01,27,17,00),0.9864864864864865],
                    [new Date(2016,01,28,22,00),0.03125],
                    [new Date(2016,02,01,22,00),0.97],
                ]);
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
                var dateRangeFilter = new google.visualization.ControlWrapper({'controlType':'ChartRangeFilter','containerId':'filter_div','options': {'filterColumnLabel':'date'}});
                var lineChart = new google.visualization.ChartWrapper({'chartType':'LineChart','containerId':'curve_chart','options':{'title': 'Total Bytes from the Source Network to Total Bytes To the Source Network per Day','curveType': 'function','legend': {'postition':'bottom'}}});
                dashboard.bind(dateRangeFilter,lineChart);
                dashboard.draw(dataSet);
            }
        </script>
    </head>
    <body>
        <!--draw charts using corresponding div tags-->
        <div id="dashboard_div">
            <div id="filter_div"></div>
            <div id="curve_chart" style="width:900px;height:500px"></div>
        </div>
    </body>
</html>

如您所见，我使用 google.visualization.arrayToDataTable() 创建了一个名为 dataSet 的变量，它返回一个DataTable。然后，在drawDashboard()方法的底部，我调用 dashboard.draw(dataSet) ，这会引发错误

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

我不确定为什么它会抛出此错误，因为dataSet显然是 DataTable 类的一个实例。我尝试多次清除缓存和cookie，但无济于事。

尝试删除对http://www.google.com/jsapi的引用

您应该只需要loader.js

我还发现在使用loader.js时，除了'controls'之外，还需要包含软件包

google.charts.load('current', {
    packages: ['controls', 'corechart'],
    callback: drawDashboard
});
function drawDashboard() {
    var dataSet = google.visualization.arrayToDataTable([
        [{label:'date',type:'datetime'},{label:'Bytes from network:Bytes to network',type:'number'}],
        [new Date(2016,01,23,00,00),1.0],
        [new Date(2016,01,23,01,00),1.0075187969924813],
        [new Date(2016,01,23,03,00),1.126865671641791],
        [new Date(2016,01,24,22,00),0.987012987012987],
        [new Date(2016,01,25,01,00),1.0],
        [new Date(2016,01,25,02,00),0.9166666666666666],
        [new Date(2016,01,25,10,00),1.0],
        [new Date(2016,01,26,12,00),1.0],
        [new Date(2016,01,27,17,00),0.9864864864864865],
        [new Date(2016,01,28,22,00),0.03125],
        [new Date(2016,02,01,22,00),0.97],
    ]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    var dateRangeFilter = new google.visualization.ControlWrapper({'controlType':'ChartRangeFilter','containerId':'filter_div','options': {'filterColumnLabel':'date'}});
    var lineChart = new google.visualization.ChartWrapper({'chartType':'LineChart','containerId':'curve_chart','options':{'title': 'Total Bytes from the Source Network to Total Bytes To the Source Network per Day','curveType': 'function','legend': {'postition':'bottom'}}});
    dashboard.bind(dateRangeFilter,lineChart);
    dashboard.draw(dataSet);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="curve_chart" style="width:900px;height:500px"></div>
</div>

相关内容

最新更新

热门标签：