我将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”?如果是这样,怎么样?
答案 0 :(得分: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>