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

问题描述

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

通过阅读文档，有一个 提供轴标签

使用 DateFormat 格式化数据后

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

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

//设置 X 轴标签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 方法

//设置 X 轴标签var xTicks = [];for (var i = 0; i < dataTable.getNumberOfRows(); i++) {xTicks.push({v: dataTable.getValue(i, 0),f: dateFormat.formatValue(dataTable.getValue(i, 0))});}/*** 或者 ***///自定义日期，不在 dataTable 中var customDate = new Date(2016, 9, 4, 22, 7, 7);xTicks.push({v:自定义日期，f: dateFormat.formatValue(customDate)});

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

google.charts.load('current', {回调:函数(){var dataTable = new google.visualization.DataTable();dataTable.addColumn('datetime', '时间');dataTable.addColumn('number', '狼');数据表.addRows([[新日期(2020, 1, 1, 12), 1],[新日期(2020, 1, 1, 13), 3]]);//创建时区偏移为 -4 的 DateFormatvar dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});//格式化第一列dateFormat.format(dataTable, 0);//设置 X 轴标签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(数据表，{h轴:{滴答声:xTicks}});},包:['corechart'，'table']});

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

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.

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.

Here's my code:

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

Here's the resulting charts:

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?

解决方案

use the hAxis.ticks configuration option to provide the axis labels

once the data has been formatted with DateFormat

build an array with the labels to be displayed

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

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>

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