Google 图表列图表轴日期错误

Question

我有一个 Google 图表（柱状图）显示一个日期为 (2010 年 1 月 = 2010-01-01) 的柱 - 但结果柱似乎运行从 1- Jul-09 到 1-Jul-10（请注意，这似乎会根据屏幕的宽度而改变）；我该如何解决这个问题，以便该列仅位于 01-Jan-2010 日期？（**请注意，dates/values 是可变的，可以包含一个或数百个列值，因此我们不能简单地对其进行硬编码或将列类型从 'date' 更改为 'string'）。

  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)
return 来自数据 table.

的日期值

var xTicks = data.getDistinctValues(0);

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

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

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>

Google 图表列图表轴日期错误

Google Chart columnChart haxis dates are wrong

javascript

charts

google-visualization