Question

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

arrayToDataTable()

正如我所看到的，我使用<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>  <div id="dashboard_div"> <div id="filter_div"></div> <div id="curve_chart" style="width:900px;height:500px"></div> </div> </body> </html>创建了一个名为dataSet的变量，它返回google.visualization.arrayToDataTable()。然后，在DataTable方法的底部，我调用drawDashboard()，这会引发错误

dashboard.draw(dataSet)

我不确定为什么会抛出此错误，因为You called the draw() method with the wrong type of data rather than a DataTable or DataView显然是dataSet类的一个实例。我尝试多次清理缓存和cookie，但无济于事。

Answer 1

尝试删除对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>

给定DataTable时，Google Charts draw（）方法的类型错误

1 个答案: