谷歌图表水平滚动 [英] Google Chart horizontal scrolling
本文介绍了谷歌图表水平滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图设置图表的可视化，以显示最多4个月的可能性水平滚动。
我试图设置一些属性就像hAxis一样，但是当我设置它时，页面会将我返回一个错误a.getTime不是一个函数。
另一个问题是挑选缩放和水平滚动只能在Chrome桌面上运行，而不能在android webview中运行。
< html>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< script type =text / javascript>
//加载Visualization API和corechart软件包。
google.charts.load（'current'，{$ b $'packages'：['corechart'，'controls']
}）;
//设置回调以在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）;
// RAW数据
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]]';
//创建并填充数据表的回调，
//实例化饼图，传递数据并
//绘制它。
函数drawChart（）{
//创建数据表。
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]，
[新日期（2017,2,1），5,5]，
[新日期（2017,3,1），6,6]，
[新日期（2017，4 ，1），8，7]，
[new Date（2017,5,1），3,5]，
[new Date（2017，6，1），4,5]，
[新日期（2017,7,1），5,5]，
[新日期（2017,8,1），6,6]，
[新日期（2017,9 ，1），8,7]，
[新日期（2017,10,1），3,5]，
[新日期（2017,11,1），4,5]，
[新日期（2018,0,1），5,5]，
[新日期（2018,1,1），6,6]，
[新日期（2018,2 ，1），8，7]
]）;
$选项
var options = {
'title'：'prova assi tempo'，
isStacked：true，$ b $'explorer'：{
轴：'horizontal'
}，
'动画'：{
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 ）
请参阅以下工作片段，
，在过滤器上设置 range.start 和 end ... p>
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 ]，[新的日期（2017,2,1），5,5]，[新日期（2017,3,1），6,6]，[新日期（2017,4,1），8,7]，[新日期（新日期（2017,6,1），4,5]，[新日期（2017,7,1），5,5]，[新日期（2017年5月1日） [新日期（2017,9,1），8,7]，[新日期（2017,10,1），3,5]，[新日期（2017,11,11），6,6]，[ 1），4，5]，[新日期（2018,0,1），5,5]，[新日期（2018,1,1），6,6]，[新日期（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） 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'}，图例：{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>
$ b
I'm trying to set the visualization of the graph to showing a maximum of 4 months with the possibility to scroll horizontally.
I have tried to set some property like hAxis, but the page retun me back an error "a.getTime is not a function" when I set it.
Another problem is that pick to zoom and horizontal scrolling only work in chrome desktop, but not in 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>
解决方案
values for viewWindow.min and max should have the same type as the values on the axis,
in this case 'date' for the hAxis
e.g.
hAxis: {
viewWindow: {
min: new Date(2017, 0, 1),
max: new Date(2017, 3, 1)
}
}
another option would be using a dashboard with a range filter (ChartRangeFilter)
see following working snippet,
here, set range.start and end on the filter...
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>
这篇关于谷歌图表水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
