Question

我将Google图表设置为hAxis作为时间轴。我的客户希望在24小时内显示时间，并在旁边打印GMT偏移量和日期。我的代码很简单，但“GMT”标签产生了一个有趣的副作用。

这是我的格式代码："format": 'H:MM '+' GMT'+$scope.offset.toString()+'\r\n MM/dd/yyyy'但结果是：

6:03 AD3T+7
03/21/2016

来自“GMT”的AD3T，这可能是通过G（获得AD？）和M获得月份（3）的结果，而T显然没有效果。

我的问题是，在Google Charts JSON对象中，如何设置时间戳的格式，使其具有人性化的“GMT”标签和偏移量？我是否需要逃避“GMT”？如果是这样，怎么样？

Answer 1

有几种不同的方式可以应用格式，最简单的方法是hAxis.format 它遵循ICU pattern set
有关所有可用模式，请参阅详细说明下的表格。

我认为这可能会让你接近，包括抵消 'H:MM ZZZZ \r\n MM/dd/yyyy'

您也可以提供自己的刻度线这意味着您可以应用自己在JavaScript中生成的自定义格式以下示例假定已经发生此格式化。

提供谷歌接受的典型对象数组中的列值每个刻度标记一个，您需要显示
{v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}

以下是两个示例，一个使用hAxis.format，另一个使用ticks ...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = [
    ['Date', 'Value'],                          //provide custom formatting
    [ {v: new Date(2013, 4,  4, 1, 3, 0, 0), f: '1:05 GMT-04:00 \r\n 05/04/2013'}, 38177],
    [ {v: new Date(2013, 4,  5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}, 38705],
    [ {v: new Date(2013, 4, 12, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/12/2013'}, 38210],
    [ {v: new Date(2013, 4, 13, 4, 8, 0, 0), f: '4:05 GMT-04:00 \r\n 05/13/2013'}, 38029],
    [ {v: new Date(2013, 4, 19, 8, 9, 0, 0), f: '8:05 GMT-04:00 \r\n 05/19/2013'}, 38823],
    [ {v: new Date(2013, 4, 23, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/23/2013'}, 38345],
    [ {v: new Date(2013, 4, 24, 1, 1, 0, 0), f: '1:05 GMT-04:00 \r\n 05/24/2013'}, 38436],
    [ {v: new Date(2013, 4, 30, 6, 8, 0, 0), f: '6:05 GMT-04:00 \r\n 05/30/2013'}, 38447]
  ];

  var tickMarks = [];
  for (var i = 1; i < data.length; i++) {
    tickMarks.push(data[i][0]);
    i = i + 1;
  }
  tickMarks.push(data[data.length - 1][0]);

  var optionsA = {
    hAxis: {
      format: 'H:MM ZZZZ \r\n MM/dd/yyyy',
    },
    legend: 'none',
    pointSize: 5
  };

  var optionsB = {
    hAxis: {
      ticks: tickMarks
    },
    legend: 'none',
    pointSize: 5
  };

  var chartA = new google.visualization.LineChart(document.getElementById('chart_divA'));
  chartA.draw(google.visualization.arrayToDataTable(data), optionsA);

  var chartB = new google.visualization.LineChart(document.getElementById('chart_divB'));
  chartB.draw(google.visualization.arrayToDataTable(data), optionsB);
}

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

逃离Google图表时间戳的“GMT”

1 个答案: