格式化Google Charts日期时间轴标签的时区 [英] Formatting timezone of Google Charts datetime axis labels

问题描述

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

I'm using GoogleCharts to draw a line chart with a 'datetime' type along one axis. I'd like to format the axis labels so that they display times in a specified timezone instead of the default browser timezone.

通过阅读文档，有一个 DateFormat 对象，该对象可以向其提供"timeZone"选项，然后使用相应的DataTable和列进行调用以格式化该列中的所有单元格.我注意到，如果将DataTable绘制为表，则这样做会导致值格式正确.但是，这种相同的格式不适用于诸如LineChart或Bar的图表上的轴标签.

From reading the documentation, there is a DateFormat object which can be supplied with a 'timeZone' option, and then called with the appropriate DataTable and column to format all cells in that column. I've noticed that doing this results in values that are correctly formatted if the DataTable is drawn as a Table. However, this same formatting does not apply to axis labels on charts such as LineChart or 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).

Note how the table displays correctly formatted times in the relevant cells, whereas the line chart axes display browser time (GMT in this case).

是否可以更改折线图轴标签的时区格式?我可能会缺少一些东西吗?

Is there a way of changing the timezone formats of the line chart axis labels? Is there something I might be missing?

推荐答案

使用hAxis.ticks 一旦数据已使用DateFormat

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

build an array with the labels to be displayed

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

use object notation to provide the value (v:) and formatted value (f:) for each label

// 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

if you don't necessarily need to format the entire dataTable,
or you want to use labels that don't exist in the dataTable,
use the formatValue method on DateFormat

// 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)
});

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

see following working snippet...

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>

这篇关于格式化Google Charts日期时间轴标签的时区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！