javascript - 格式化 Google Charts 日期时间轴标签的时区

Question

我正在使用 GoogleCharts 沿一个轴绘制带有“日期时间”类型的折线图。我想格式化轴标签，以便它们在指定时区而不是默认浏览器时区中显示时间。

通过阅读文档，有一个 DateFormat可以提供“timeZone”选项的对象，然后使用适当的 DataTable 和列调用以格式化该列中的所有单元格。我注意到，如果将 DataTable 绘制为表格，则执行此操作会生成格式正确的值。但是，这种相同的格式不适用于图表上的轴标签，例如 LineChart 或 Bar。

这是我的代码:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('datetime', 'Time');
dataTable.addColumn('number', 'Wolves');
dataTable.addRows([
  [new Date(2020, 1, 1, 12), 1],
  [new Date(2020, 1, 1, 13), 3]
]);

// Create DateFormat with a timezone offset of -4
var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});

// Format the first column
dateFormat.format(dataTable, 0);

dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4"

var table = new google.visualization.Table(document.getElementById('wolf_table'));
table.draw(dataTable);

var lineChart = new google.visualization.LineChart(document.getElementById('wolf_chart'));
lineChart.draw(dataTable);

这是生成的图表:

请注意表格如何在相关单元格中正确显示格式化时间，而折线图轴显示浏览器时间(在本例中为 GMT)。

有没有办法改变折线图轴标签的时区格式？有什么我可能遗漏的吗？

Answer 1

使用hAxis.ticks configuration option提供轴标签

一旦数据被DateFormat格式化

用要显示的标签构建一个数组

使用对象表示法为每个标签提供值(v:)和格式化值(f:)

// Set X-Axis Labels
var xTicks = [];
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
  xTicks.push({
    v: dataTable.getValue(i, 0),
    f: dataTable.getFormattedValue(i, 0)
  });
}

如果你不一定需要格式化整个dataTable，
或者您想使用 dataTable 中不存在的标签，
在 DateFormat

上使用 formatValue 方法

// Set X-Axis Labels
var xTicks = [];
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
  xTicks.push({
    v: dataTable.getValue(i, 0),
    f: dateFormat.formatValue(dataTable.getValue(i, 0))
  });      
}

/*** OR ***/      

// custom date, not in dataTable
var customDate = new Date(2016, 9, 4, 22, 7, 7);
xTicks.push({
  v: customDate,  
  f: dateFormat.formatValue(customDate)
});

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

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('datetime', 'Time');
    dataTable.addColumn('number', 'Wolves');
    dataTable.addRows([
      [new Date(2020, 1, 1, 12), 1],
      [new Date(2020, 1, 1, 13), 3]
    ]);

    // Create DateFormat with a timezone offset of -4
    var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});

    // Format the first column
    dateFormat.format(dataTable, 0);

    // Set X-Axis Labels
    var xTicks = [];
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      xTicks.push({
        v: dataTable.getValue(i, 0),
        f: dataTable.getFormattedValue(i, 0)
      });
    }

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(dataTable);

    var lineChart = new google.visualization.LineChart(document.getElementById('chart_div'));
    lineChart.draw(dataTable, {
      hAxis: {
        ticks: xTicks
      }
    });
  },
  packages:['corechart', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div id="chart_div"></div>