谷歌图表列图表轴日期错误

Question

我有一个谷歌图表（柱形图）显示单个日期（2010 年 1 月 = 2010 年 1 月 1 日）列 - 但生成的列似乎从 09 年 7 月 1 日到 10 年 7 月 1 日（请注意，这似乎会根据屏幕的宽度而变化）；我该如何解决这个问题，以便该列仅位于 2010 年 1 月 1 日的日期？ （**注意，日期/值是可变的，可以包含一个或数百个列值，因此我们不能简单地对其进行硬编码或将列类型从“日期”更改为“字符串”）。

  var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
  var data = new google.visualization.DataTable();

  data.addColumn('date', 'Dt');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);

  var options_stacked = {
    isStacked: true,
    height: 300,
    colors: ['#111', '#a00'],
    hAxis: {
     slantedText: false,
     format: 'd/MMM/yy',
    },
    legend: {
      position: 'top',
    },
    vAxis: {
    minValue: 0
  }
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);

可以在https://jsfiddle.net/Abeeee/d5fojtp2/34/上找到演示者

Answer 1

您可以添加自定义刻度以确保每列“位于”正确的日期。

ticks 选项需要一个值数组。
我们可以使用 DataTable 方法 --> getDistinctValue(colIndex)
从数据表中返回日期值。

var xTicks = data.getDistinctValues(0);

hAxis: {
  slantedText: false,
  format: 'd.MMM.yy',      <---- changed from 'd/MMM/yy' to avoid line breaks
  ticks: xTicks
},

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

function doTest() {
  var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
  var data = new google.visualization.DataTable();

  data.addColumn('date', 'Dt');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);
  
  var xTicks = data.getDistinctValues(0);

  var options_stacked = {
    isStacked: true,
    height: 300,
    colors: ['#111', '#a00'],
    hAxis: {
      slantedText: false,
      format: 'd/MMM/yy',
      ticks: xTicks
    },
    legend: {
      position: 'top',
    },
    vAxis: {
      minValue: 0
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options_stacked);
}

window.addEventListener('resize', doTest);

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<h1>Google Charts</h1>
<div id="chart_div"></div>