从 google 可视化折线图中删除月份

Question

我的 google 可视化图表的 x 轴是 javascript new Date(year+i, 0, 0)。但是，当我打印折线图时。它在底部显示 M J S 和年份。

如何删除这些 M J S（我认为是 5 月 6 月和 9 月）。

Answer 1

以下代码片段重现了该问题，年号与月份缩写相结合...

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 选项 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 选项 ticks。
ticks 必须与 x 轴上的数据采用相同的格式，在本例中为日期。
所以我们提供每年的 1 月日期...

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>

从 google 可视化折线图中删除月份

Removing months from google visualisation line chart

charts

google-visualization