如何設置谷歌時間線圖表的最小和最大日期 [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