作者:一支妙笔生花来 | 来源:互联网 | 2023-02-04 18:54
我有一个时间表图表,非常类似于此页面上的第一个示例(https://developers.google.com/chart/interactive/docs/gallery/timeline).
我在Y轴上做活动(做午餐,吃饭,ecc),在X轴上我有时间.
我想启用水平滚动和图表放大/缩小(如本主题Google图表水平滚动条中所述).但我似乎无法让它发挥作用.
有没有办法在时间线图表上启用水平滚动?
非常感谢.
亚历山德罗
1> WhiteHat..:
没有规范的配置选项的上时间轴图表滚动也不变焦.
但你可以使用CSS进行水平滚动
在图表选项中设置特定宽度 - > width: 1200
并将其包裹在宽度较小的容器中 - > overflow-x: scroll;
请参阅以下工作代码段以获取示例...
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var cOntainer= document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable, {
width: 1200
});
}
#chart_wrapper {
overflow-x: scroll;
overflow-y: hidden;
width: 400px;
}