Как скрыть часы Google Charts от hAxis - PullRequest
Новая
       4

Как скрыть часы Google Charts от hAxis

0 голосов
/ 05 февраля 2019

Я использую линейный график из Google Charts.Я показываю дату по оси (горизонтальная).Мои основные линии сетки показывают дату обычно.Но есть метки времени между метками даты.И я не хочу метки времени.image Я пытался поместить это свойство в 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']},
              }
             }
},

есть кто-нибудь, кто знаетрешение?

1 Ответ

0 голосов
/ 05 февраля 2019

сначала удалите параметры для 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>
...