如何从 hAxis 隐藏 Google Charts 小时

Question

我正在使用 Google Charts 中的折线图。我在 hAxis（水平）上显示日期。我的主要网格线正常显示日期。但是日期标签之间有时间标签。我不想要时间标签。 我试图将该属性放在图表选项的 hAxis 中，但没有任何改变

minorGridlines:{textPosition: 'none' }

hAxis 选项；

hAxis: {titleTextStyle: {color: '#0000ff'},
            slantedText:true, slantedTextAngle:60,format: 'd/M/yy',minorGridlines:{textPosition: 'none' },gridlines: {
              count: -1,
              units: {
                days: {format: ['d.MM']},
                hours: {format: ['HH:mm']},
              }
             }
},

有谁知道解决办法吗？

Answer 1

首先，删除gridlines 的选项。
但是，这可能会导致相同的日期标签重复。
防止重复，
您可以提供自己的ticks。

hAxis.ticks 选项采用日期数组，在本例中为日期。
要构建ticks数组，我们可以使用数据表法 --> getColumnRange(colIndex)
这将返回列的min 和max 值。

然后我们可以构建我们的ticks 数组。

// build hAxis ticks
var hAxisTicks = [];
var dateRange = data.getColumnRange(0);
var oneDay = (24 * 60 * 60 * 1000);
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
  hAxisTicks.push(new Date(i));
}

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  data.addRows([
    [new Date(2019, 0, 1, 0), 10],
    [new Date(2019, 0, 1, 6), 20],
    [new Date(2019, 0, 1, 12), 30],
    [new Date(2019, 0, 1, 18), 40],
    [new Date(2019, 0, 2, 0), 10],
    [new Date(2019, 0, 2, 6), 20],
    [new Date(2019, 0, 2, 12), 30],
    [new Date(2019, 0, 2, 18), 40],
    [new Date(2019, 0, 3, 0), 10],
    [new Date(2019, 0, 3, 6), 20],
    [new Date(2019, 0, 3, 12), 30],
    [new Date(2019, 0, 3, 18), 40],
    [new Date(2019, 0, 4, 0), 10],
    [new Date(2019, 0, 4, 6), 20],
    [new Date(2019, 0, 4, 12), 30],
    [new Date(2019, 0, 4, 18), 40],
  ]);

  // build hAxis ticks
  var hAxisTicks = [];
  var dateRange = data.getColumnRange(0);
  var oneDay = (24 * 60 * 60 * 1000);
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    hAxisTicks.push(new Date(i));
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {
      format: 'd/M/yy',
      ticks: hAxisTicks
    }
  });
});

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

---

编辑

手动构建刻度会导致性能下降，
但只有几毫秒，这没什么。

请参阅以下工作 sn-p，
绘制了 540 行，构建刻度所需的毫秒数显示在控制台中...

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

  for (var i = (new Date(2019, 0, 1)).getTime(); i <= (new Date(2019, 3, 1)).getTime(); i = i + (4 * 60 * 60 * 1000)) {
    data.addRow([new Date(i), i]);
  }

  // build hAxis ticks
  var test = new Date();
  console.log('rows', data.getNumberOfRows());
  var hAxisTicks = [];
  var dateRange = data.getColumnRange(0);
  var oneDay = (24 * 60 * 60 * 1000);
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    hAxisTicks.push(new Date(i));
  }
  console.log('milliseconds', ((new Date()).getTime() - test.getTime()));

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {
      format: 'd/M/yy',
      ticks: hAxisTicks
    }
  });
});

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