Google Chart 中的什么配置可以减少 hAxis 上显示的 number/dates 数量？

Question

我在 Google 图表中使用折线图，我只剩下一件事需要配置，即 hAxis 日期。

日期只有2天的差距，比如2月2日、2月4日、2月6日、2月8日等等，所以它在h轴上显示了15个日期。我想将差距扩大 7 天或将显示的日期数减少 4 个日期。如何实现？我似乎无法在这里找到正确的配置：https://developers.google.com/chart/interactive/docs/gallery/linechart.

这是我的图表：https://jsfiddle.net/hpx7Lj91/1/

google.charts.load('current', {
  packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Price');

  data.addRows([
    [new Date(2022, 1, 1), 0.2500],
    [new Date(2022, 1, 2), 0.2500],
    [new Date(2022, 1, 3), 0.2600],
    [new Date(2022, 1, 4), 0.2700],
    [new Date(2022, 1, 5), 0.2800],
    [new Date(2022, 1, 6), 0.3000],
    [new Date(2022, 1, 7), 0.2900],
    [new Date(2022, 1, 8), 0.3300],
    [new Date(2022, 1, 9), 0.3100],
    [new Date(2022, 1, 10), 0.3200],
    [new Date(2022, 1, 11), 0.3200],
    [new Date(2022, 1, 12), 0.3200],
    [new Date(2022, 1, 13), 0.3100],
    [new Date(2022, 1, 14), 0.3200],
    [new Date(2022, 1, 15), 0.3000],
    [new Date(2022, 1, 16), 0.3100],
    [new Date(2022, 1, 17), 0.3000],
    [new Date(2022, 1, 18), 0.3000],
    [new Date(2022, 1, 19), 0.2900],
    [new Date(2022, 1, 20), 0.2800],
    [new Date(2022, 1, 21), 0.2700],
    [new Date(2022, 1, 22), 0.2700],
    [new Date(2022, 1, 23), 0.2700],
    [new Date(2022, 1, 24), 0.2600],
    [new Date(2022, 1, 25), 0.2700],
    [new Date(2022, 1, 26), 0.2600],
    [new Date(2022, 1, 27), 0.2500],
    [new Date(2022, 1, 28), 0.2500],
    [new Date(2022, 1, 29), 0.2400],
    [new Date(2022, 1, 30), 0.2500]
  ]);

  var options = {
    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    vAxis: {
      gridlines: {
        color: '#DFE3EB'
      },
      minorGridlines: {
        color: 'none'
      },
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    tooltip: {
      textStyle: {
        color: '#677185',
        fontSize: 12
      }
    },
    series: {
      0: {
        color: '#26a172'
      }
    },
    legend: {
      position: 'none'
    },
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

Answer 1

ticks 选项提供了最大的灵活性

它需要一个要显示的刻度数组，例如...

[new Date(2022, 1, 1), new Date(2022, 1, 8), new Date(2022, 1, 15), ...]

您显然可以像上面那样对它们进行硬编码，或者...
我们可以使用数据 table 方法 getColumnRange(colIndex) 从数据 table.
中找到最小和最大日期这是一个显示一定数量日期的例程，
在数据 table.

的最小日期和最大日期之间均匀间隔

  var datesToDisplay = 6;
  var dateRange = data.getColumnRange(0);
  var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
  var interval = timeRange / (datesToDisplay - 1);
  var ticks = [];
  var tick = dateRange.min;
  while (tick.getTime() <= dateRange.max.getTime()) {
    ticks.push(tick);
    tick = new Date(tick.getTime() + interval);
  }

然后添加 ticks 选项...

    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      },
      ticks: ticks  // <-- ticks option
    },

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Price');

  data.addRows([
    [new Date(2022, 1, 1), 0.2500],
    [new Date(2022, 1, 2), 0.2500],
    [new Date(2022, 1, 3), 0.2600],
    [new Date(2022, 1, 4), 0.2700],
    [new Date(2022, 1, 5), 0.2800],
    [new Date(2022, 1, 6), 0.3000],
    [new Date(2022, 1, 7), 0.2900],
    [new Date(2022, 1, 8), 0.3300],
    [new Date(2022, 1, 9), 0.3100],
    [new Date(2022, 1, 10), 0.3200],
    [new Date(2022, 1, 11), 0.3200],
    [new Date(2022, 1, 12), 0.3200],
    [new Date(2022, 1, 13), 0.3100],
    [new Date(2022, 1, 14), 0.3200],
    [new Date(2022, 1, 15), 0.3000],
    [new Date(2022, 1, 16), 0.3100],
    [new Date(2022, 1, 17), 0.3000],
    [new Date(2022, 1, 18), 0.3000],
    [new Date(2022, 1, 19), 0.2900],
    [new Date(2022, 1, 20), 0.2800],
    [new Date(2022, 1, 21), 0.2700],
    [new Date(2022, 1, 22), 0.2700],
    [new Date(2022, 1, 23), 0.2700],
    [new Date(2022, 1, 24), 0.2600],
    [new Date(2022, 1, 25), 0.2700],
    [new Date(2022, 1, 26), 0.2600],
    [new Date(2022, 1, 27), 0.2500],
    [new Date(2022, 1, 28), 0.2500],
    [new Date(2022, 1, 29), 0.2400],
    [new Date(2022, 1, 30), 0.2500]
  ]);
  
  var datesToDisplay = 6;
  var dateRange = data.getColumnRange(0);
  var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
  var interval = timeRange / (datesToDisplay - 1);
  var ticks = [];
  var tick = dateRange.min;
  while (tick.getTime() <= dateRange.max.getTime()) {
    ticks.push(tick);
    tick = new Date(tick.getTime() + interval);
  }

  var options = {
    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      },
      ticks: ticks
    },
    vAxis: {
      gridlines: {
        color: '#DFE3EB'
      },
      minorGridlines: {
        color: 'none'
      },
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    tooltip: {
      textStyle: {
        color: '#677185',
        fontSize: 12
      }
    },
    series: {
      0: {
        color: '#26a172'
      }
    },
    legend: {
      position: 'none'
    },
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Chart 中的什么配置可以减少 hAxis 上显示的 number/dates 数量？

What is the configuration in Google Chart to lessen the number of number/dates display on the hAxis?

javascript

charts

google-visualization