Question

我正在使用Google图表中的折线图。我在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));
}

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

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>

编辑

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

请参阅以下工作片段，
绘制了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>

如何从hAxis隐藏Google Charts小时

1 个答案: