Удаление месяцев из гистограммы визуализации Google - PullRequest
Новая
       12

Удаление месяцев из гистограммы визуализации Google

1 голос
/ 31 октября 2019

Моя ось X для диаграммы визуализации Google - javascript new Date(year+i, 0, 0). Однако, когда я печатаю линейный график. Он показывает MJS внизу с номером года.

Как я могу удалить эти MJS (я полагаю, это май, июнь и сентябрь).

enter image description here

1 Ответ

1 голос
/ 31 октября 2019

следующий фрагмент повторно создает проблему, с номером года в сочетании с сокращениями месяца ... 

2020 M J S 2021 M J S etc...


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

  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
    }
  }

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

  chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

, чтобы показывать только год, вы можете использовать hAxis option format. 

hAxis: {
  format: 'yyyy'
}

однако это может привести к повторению года (в зависимости от ширины графика) ... 

2020 2020 2020 2020 2021 2021 2021

см. Следующий фрагмент ... 

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

  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
    }
  }

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

  chart.draw(data, {
    hAxis: {
      format: 'yyyy'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

, чтобы год не повторился, мы также должны предоставить hAxis option ticks.
ticks должно бытьв том же формате, что и данные по оси X, в данном случае это дата.
, поэтому мы предоставляем дату jan для каждого года ... 

hAxis: {
  format: 'yyyy',
  ticks: [new Date(2020, 0, 1), new Date(2021, 0, 1), new Date(2022, 0, 1)]
}

, вы должны иметь возможность создатьтик динамически, из данных.
см. следующий фрагмент для примера ... 

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

  var ticks = [];
  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
      if (m === 0) {
        ticks.push(new Date(y, m, 1));
      }
    }
  }

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

  chart.draw(data, {
    hAxis: {
      format: 'yyyy',
      ticks: ticks
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...