如何设置谷歌时间线图表的最小和最大日期 [2020]
[英]How to set Min and Max date for Google timline Charts [2020]
问题描述
I would like to set the Min and Max date in Google timeline charts.
我想在 Google 时间线图表中设置最小和最大日期。 I have tried:我努力了：
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
legend: 'none',
tooltip: {isHtml: true},
hAxis: {
minValue : new Date(2018, 11, 31),
maxValue : new Date(2020, 1, 3)
},
};
As you see, i see 2015 so it doesn't work:如您所见，我看到了 2015 年，所以它不起作用：
Someone said in another post:有人在另一篇文章中说：
you can use options --> hAxis.minValue & hAxis.maxValue你可以使用选项 --> hAxis.minValue & hAxis.maxValue
I thought that's what I was doing.我以为这就是我正在做的。 How to do?怎么做？
Here is my code:这是我的代码：
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline'],'language': 'fr'}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'President' }); data.addColumn({ type: 'string', id: 'dummy bar label' }); data.addColumn({ type: 'string', role: 'tooltip' }); data.addColumn({ type: 'date', id: 'Start' }); data.addColumn({ type: 'date', id: 'End' }); data.addRows([ [ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ], [ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ], [ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ]]); var options = { height: 450, timeline: { groupByRowLabel: true }, legend: 'none', tooltip: {isHtml: true}, hAxis: { minValue: new Date(2018, 11, 31), maxValue: new Date(2020, 1, 3) }, }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
1 个解决方案
解决方案1
1 2020-12-03 17:57:18
options hAxis.minValue & hAxis.maxValue only work to expand the x-axis.选项hAxis.minValue和hAxis.maxValue仅用于扩展 x 轴。
where hAxis.minValue is less than the earliest date in the data table,其中hAxis.minValue小于数据表中的最早日期，
and hAxis.maxValue is greater than the latest date in the data table.并且hAxis.maxValue大于数据表中的最新日期。
they will not reduce the x-axis within the dates that exist in the data table.它们不会减少数据表中存在的日期内的 x 轴。
see following working snippet...请参阅以下工作片段...
google.charts.load('current', { packages: ['timeline'], language: 'fr' }).then(function () { var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'President' }); data.addColumn({ type: 'string', id: 'dummy bar label' }); data.addColumn({ type: 'string', role: 'tooltip' }); data.addColumn({ type: 'date', id: 'Start' }); data.addColumn({ type: 'date', id: 'End' }); data.addRows([ [ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ], [ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ], [ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ] ]); var options = { height: 450, timeline: { groupByRowLabel: true }, legend: 'none', tooltip: {isHtml: true}, hAxis: { minValue: new Date(2010, 11, 31), maxValue: new Date(2030, 1, 3) } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.