给出DataTable时Google Charts draw（）方法的错误类型 [英] Google Charts draw() method wrong type when given DataTable
本文介绍了给出DataTable时Google Charts draw（）方法的错误类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在Google Charts中使用HTML和Javascript显示带有范围过滤器的折线图，但是每当我运行 draw（）函数时，代码都会告诉我我为 draw（）参数使用了错误的数据数据类型（它应该是 DataTable ）。但是，我使用 arrayToDataTable（）构建数据，根据Google Charts API documentation 创建一个DataTable。以下是我的完整代码：
< html>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< script type =text / javascript>
//图表数据
google.charts.load（'current'，{'packages'：['controls']}）;
google.charts.setOnLoadCallback（drawDashboard）;
$ b $ function drawDashboard（）{
var dataSet = google.visualization.arrayToDataTable（[
[{label：'date'，type：'datetime'}，{label：'字节到网络'，输入：'number'}]，
[new Date（2016,01,23,00,00），1.0]，
[new Date（2016,01 ，23,01,00），1.0075187969924813]，
[新日期（2016,01,23,03,00），1.126865671641791]，
[新日期（2016,01,24,22,00 ），0.987012987012987]，
[新日期（2016,01,25,01,00），1.0]，
[新日期（2016,01,25,02,00），0.9166666666666666]，
[新日期（2016,01,25,10,00），1.0]，
[新日期（2016,01,26,12,00），1.0]，
[新日期（2016,01,27,17,00），0.9864864864864865]，
[新日期（2016,01,28,22,00），0.03125]，
[新日期（2016,02,01 ，22,00），0.97]，
]）;
var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））;
$ b $ var dateRangeFilter = new google.visualization.ControlWrapper（{'controlType'：'ChartRangeFilter'，'containerId'：'filter_div'，'options'：{'filterColumnLabel'：'date'}}） ;
$ b $ var lineChart = new google.visualization.ChartWrapper（{'chartType'：'LineChart'，'containerId'：'curve_chart'，'options'：{'title'：'Source中的总字节数网络到总字节到每天源网络'，'curveType'：'function'，'legend'：{'postition'：'bottom'}}}）;
dashboard.bind（dateRangeFilter，lineChart）;
dashboard.draw（dataSet）;
}
< / script>
< / head>
< body>
<！ - 使用相应的div标签绘制图表 - >
< div id =dashboard_div>
< div id =filter_div>< / div>
< div id =curve_chartstyle =width：900px; height：500px>< / div>
< / div>
< / body>
< / html>
可以看到，我创建了一个名为 dataSet 使用 google.visualization.arrayToDataTable（），它返回一个 DataTable 。然后，在 drawDashboard（）方法的底部，我调用 dashboard.draw（dataSet），这会引发错误
您使用错误的数据类型调用了draw（）方法，而不是DataTable或DataView
我不确定为什么会抛出这个错误，因为 dataSet 显然是 DataTable 类的一个实例。我尝试清除我的缓存和Cookie多次，但无济于事。 尝试删除对
您应该只需要 loader.js $ b
我也发现在使用 loader.js 时，需要包含除了'controls'
google.charts.load（'current'，{包：['controls'，'corechart']，callback：drawDashboard}）;函数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]，[新日期（2016 ，01,23,03,00），1.126865671641791]，[新日期（2016,01,24,22,00），0.987012987012987]，[新日期（2016,01,25,01,00），1.0]，[新日期（2016,01,25,02,00），0.9166666666666666]，[新日期（2016,01,25,10,00），1.0]，[新日期（2016,01,26,12,00）， 1.0]，[新日期（2016,01,27,17,00），0.9864864864864865]，[新日期（2016,01,28,22,00），0.03125]，[新日期（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'：'从源网络到总字节的总字节数到源网络每日'，'curveType'：'功能'，'传说'：{'postition'：'bottom'}}}）; dashboard.bind（dateRangeFilter，线型图）; 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_chartstyle =width：900px; height：500px>< / div>< / div>
I am attempting to show a line chart with a range filter in Google Charts using HTML and Javascript, but whenever I run the draw() function, the code tells me that I used the wrong data datatype for the draw() argument (it should be a DataTable). However, I contruct my data using arrayToDataTable(), which according to the Google Charts API documentation, creates a DataTable. Here is my full code:
<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>
As one can see, I create a variable called dataSet using google.visualization.arrayToDataTable(), which returns a DataTable. Then, at the bottom of the drawDashboard() method, I call dashboard.draw(dataSet), which throws the error
You called the draw() method with the wrong type of data rather than a DataTable or DataView
I'm not sure why it is throwing this error, since dataSet is clearly an instance of the DataTable class. I tried clearing my cache and cookies multiple times, but to no avail.
解决方案
Try removing the reference to http://www.google.com/jsapi
You should only need loader.js
I've also found when using loader.js, packages need to be included, in addition to '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（）方法的错误类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
