如何设置谷歌时间线图表的最小和最大日期 [2020]

Question

我想在 Google 时间线图表中设置最小和最大日期。 我努力了：

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)
      },
  };

如您所见，我看到了 2015 年，所以它不起作用：

有人在另一篇文章中说：

你可以使用选项 --> hAxis.minValue & hAxis.maxValue

我以为这就是我正在做的。 怎么做？

这是我的代码：

 <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>

Answer 1

选项hAxis.minValue和hAxis.maxValue仅用于扩展 x 轴。
其中hAxis.minValue小于数据表中的最早日期，
并且hAxis.maxValue大于数据表中的最新日期。

它们不会减少数据表中存在的日期内的 x 轴。

请参阅以下工作片段...

 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>

如何设置谷歌时间线图表的最小和最大日期 [2020]

问题描述

1 个解决方案

解决方案1
1 2020-12-03 17:57:18

如何设置谷歌时间线图表的最小和最大日期 [2020]

问题描述

1 个解决方案

解决方案1 1 2020-12-03 17:57:18

解决方案1
1 2020-12-03 17:57:18