問題描述

我正在使用 GoogleCharts 沿一個(gè)軸繪制帶有日期時(shí)間"類型的折線圖.我想格式化軸標(biāo)簽，以便它們?cè)谥付〞r(shí)區(qū)而不是默認(rèn)瀏覽器時(shí)區(qū)顯示時(shí)間.

通過閱讀文檔，有一個(gè) 提供軸標(biāo)簽

使用 DateFormat 格式化數(shù)據(jù)后

用要顯示的標(biāo)簽構(gòu)建一個(gè)數(shù)組

使用對(duì)象表示法為每個(gè)標(biāo)簽提供值 (v:) 和格式化值 (f:)

//設(shè)置 X 軸標(biāo)簽var xTicks = [];for (var i = 0; i < dataTable.getNumberOfRows(); i++) {xTicks.push({v: dataTable.getValue(i, 0),f: dataTable.getFormattedValue(i, 0)});}

如果你不一定需要格式化整個(gè)dataTable，
或者您想使用 dataTable 中不存在的標(biāo)簽，
在 DateFormat 上使用 formatValue 方法

//設(shè)置 X 軸標(biāo)簽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)});

請(qǐng)參閱以下工作片段...

google.charts.load('current', {回調(diào):函數(shù)(){var dataTable = new google.visualization.DataTable();dataTable.addColumn('datetime', '時(shí)間');dataTable.addColumn('number', '狼');數(shù)據(jù)表.addRows([[新日期(2020, 1, 1, 12), 1],[新日期(2020, 1, 1, 13), 3]]);//創(chuàng)建時(shí)區(qū)偏移為 -4 的 DateFormatvar dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});//格式化第一列dateFormat.format(dataTable, 0);//設(shè)置 X 軸標(biāo)簽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(數(shù)據(jù)表，{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>

這篇關(guān)于格式化谷歌圖表日期時(shí)間軸標(biāo)簽的時(shí)區(qū)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！