我一直在使用 Google Visualization 开发此数据集，到目前为止，我已成功使其正常运行并已完成一半。只有一张图表可以改变chartType用户检查顶部的黄色单选按钮之一。在这组黄色单选按钮下面是一组蓝色单选按钮。
这些蓝色单选按钮的目的是更改 DataView ，不幸的是，我似乎无法让它工作。我收到以下错误:
Uncaught TypeError: a.Y is not a function(…).................jsapi_compiled_default_module.js:129
我已尝试降级到已弃用的 Google API:
我已将 jQuery 降级至 2.2.2
我已将脚本放在结束
</body>之前标签。我已将其放在
</head>中我疯了。
[PLUNKER]
片段
<!--THIS PART REMOVED-->
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var options = {
backgroundColor: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 0
},
tooltip: {
textStyle: {
color: '0000FF'
},
trigger: 'focus'
},
animation: {
"startup": true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of / Opposed to Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontSize: 18
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontSize: 22
},
format: '####'
},
vAxis: {
textStyle: {
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontSize: 16
},
maxValue: 1,
format: '#%'
},
legend: {
textStyle: {
color: 'white'
}
}
}
var query;
var chart;
var data;
var view;
var formatter;
var main;
var selChart;
var selGroup;
var visual;
google.charts.load('current', {
'packages': ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&range=A:T');
query.send(function(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
visual = new google.visualization.DataView(data);
formatter = new google.visualization.NumberFormat({
pattern: '#%'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
formatter.format(data, 7);
formatter.format(data, 8);
formatter.format(data, 9);
formatter.format(data, 10);
formatter.format(data, 11);
formatter.format(data, 12);
formatter.format(data, 13);
formatter.format(data, 14);
formatter.format(data, 15);
formatter.format(data, 16);
formatter.format(data, 17);
formatter.format(data, 18);
formatter.format(data, 19);
chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(visual, options);
});
}
$('#chartOpt').on('change', selectChart);
function selectChart() {
chartSel = $("input[name='chart']:checked").val();
main = new google.visualization.ChartWrapper({
containerId: 'chart'
});
switch (chartSel) {
case '1':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '2':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '3':
main.setChartType('ColumnChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '4':
main.setChartType('ScatterChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
}
}
$('#groupOpt').on('change', selectGroup);
function selectGroup() {
groupSel = $("input[name='group']:checked").val();
view = new google.visualization.DataView({
containerId: 'chart'
});
switch (groupSel) {
case '0':
view.setColumns([0, 1, 2, 3, 4]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '1':
view.setColumns([0, 5, 6, 7, 8, 9]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '2':
view.setColumns([0, 10, 11, 12]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '3':
view.setColumns([0, 13, 14, 15]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '4':
view.setColumns([0, 16, 17]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '5':
view.setColumns([0, 18, 19]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>最佳答案
尝试创建DataView时，代码在这里失败...
function selectGroup() {
groupSel = $("input[name='group']:checked").val();
view = new google.visualization.DataView({ // <-- fails here
containerId: 'chart'
});
switch (groupSel) {
case '0':
view.setColumns([0, 1, 2, 3, 4]);
view.setOptions(options); // <- view doesn't have this method
view.setDataTable(data); // <- view doesn't have this method
view.draw(); // <- view doesn't have this method
break;
case '1':
...
我认为您将DataView与ChartWrapper混淆了
首先，DataView 的构造函数仅接受 DataTable 或另一个 DataView，
不是 containerId
更改为 ChartWrapper 对于那里的代码确实有意义
但 ChartWrapper 没有 setColumns 的方法
改用setView
还需要设置一个 chartType
function selectGroup() {
groupSel = $("input[name='group']:checked").val();
view = new google.visualization.ChartWrapper({ // <-- change to ChartWrapper
containerId: 'chart',
chartType: 'LineChart' // <-- set chartType
});
switch (groupSel) {
case '0':
view.setView({columns: [0, 1, 2, 3, 4]}); // <-- use setView, note object arg
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '1':
...
这应该消除错误...
关于javascript - 尝试使用 Google Visualization 通过用户输入更改 DataView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40295093/