我正在尝试将图表的可视化设置为最多显示 4 个月，并且可以水平滚动。
我曾尝试设置一些属性，如 hAxis，但当我设置它时，页面返回错误“a.getTime 不是一个函数”。
还有一个问题是，pick to zoom 和 horizontal scrolling 只能在 chrome desktop 下工作，在 android webview 下不行。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages' : [ 'corechart', 'controls' ]
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
//RAW Data
var jsonString = '[[\"F1\",\"F2\",\"F3\"],[\"Gennaio\",10.0,11.0,22.0],[\"Febbraio\",5.0,15.0,20.0],[\"Marzo\",7.0,17.0,15.0],[\"Aprile\",7.0,17.0,15.0],[\"Maggio\",7.0,17.0,15.0],[\"Giugno\",7.0,17.0,15.0],[\"Luglio\",7.0,17.0,15.0],[\"Agosto\",7.0,17.0,15.0],[\"Settembre\",7.0,17.0,15.0],[\"Ottobre\",7.0,17.0,15.0]]';
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(){
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Months');
data.addColumn('number', 'Consumption');
data.addColumn('number', 'Consumption_2');
data.addRows([
[ new Date(2017, 0, 1), 3, 5 ],
[ new Date(2017, 1, 1), 4, 5 ],
[ new Date(2017, 2, 1), 5, 5 ],
[ new Date(2017, 3, 1), 6, 6 ],
[ new Date(2017, 4, 1), 8, 7 ],
[ new Date(2017, 5, 1), 3, 5 ],
[ new Date(2017, 6, 1), 4, 5 ],
[ new Date(2017, 7, 1), 5, 5 ],
[ new Date(2017, 8, 1), 6, 6 ],
[ new Date(2017, 9, 1), 8, 7 ],
[ new Date(2017, 10, 1), 3, 5 ],
[ new Date(2017, 11, 1), 4, 5 ],
[ new Date(2018, 0, 1), 5, 5 ],
[ new Date(2018, 1, 1), 6, 6 ],
[ new Date(2018, 2, 1), 8, 7 ]
]);
//OPTIONS
var options = {
'title': 'prova assi tempo',
isStacked: true,
'explorer': {
axis: 'horizontal'
},
'animation': {
duration: 500,
easing: 'in',
startup:true
}
// 'vAxis': {
// 'viewWindow': {max: 4}
// }
// 'hAxis': {
// viewWindowMode: 'explicit',
// viewWindow: {
// max: 4
// }
// }
// 'hAxis': {
// 'viewWindow': {
// max: 3
// }
// }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<div id="chart_div"></div>
</body>
</html>
最佳答案
viewWindow.min 和 max 的值应该与轴上的值具有相同的类型，
在这种情况下，'date' 用于 hAxis
例如
hAxis: {
viewWindow: {
min: new Date(2017, 0, 1),
max: new Date(2017, 3, 1)
}
}
另一种选择是使用带有范围过滤器的仪表板 (ChartRangeFilter)
请参阅以下工作 fragment ，
在这里，在过滤器上设置 range.start 和 end...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Months');
data.addColumn('number', 'Consumption');
data.addColumn('number', 'Consumption_2');
data.addRows([
[ new Date(2017, 0, 1), 3, 5 ],
[ new Date(2017, 1, 1), 4, 5 ],
[ new Date(2017, 2, 1), 5, 5 ],
[ new Date(2017, 3, 1), 6, 6 ],
[ new Date(2017, 4, 1), 8, 7 ],
[ new Date(2017, 5, 1), 3, 5 ],
[ new Date(2017, 6, 1), 4, 5 ],
[ new Date(2017, 7, 1), 5, 5 ],
[ new Date(2017, 8, 1), 6, 6 ],
[ new Date(2017, 9, 1), 8, 7 ],
[ new Date(2017, 10, 1), 3, 5 ],
[ new Date(2017, 11, 1), 4, 5 ],
[ new Date(2018, 0, 1), 5, 5 ],
[ new Date(2018, 1, 1), 6, 6 ],
[ new Date(2018, 2, 1), 8, 7 ]
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72,
isStacked: true,
seriesType: 'bars'
}
}
},
state: {
range: {
start: new Date(2017, 0, 1),
end: new Date(2017, 3, 1)
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart-column',
options: {
title: 'prova assi tempo',
isStacked: true,
explorer: {
axis: 'horizontal'
},
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup:true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart-column"></div>
<div id="filter-range"></div>
</div>关于android - 谷歌图表水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48748550/