[英]How to display UTC times properly in AmCharts 4
I am trying to make a simple graph in AmCharts 4 where all times must be in UTC, but the graph and the times displayed in the DateAxis and in the cursor tooltip are all wrong, especially when there is the daylight saving hour change (for example on 28th of October 2018).我正在尝试在 AmCharts 4 中制作一个简单的图表,其中所有时间都必须是 UTC,但是在 DateAxis 和光标工具提示中显示的图表和时间都是错误的,尤其是在夏令时更改时(例如2018 年 10 月 28 日)。
https://i.stack.imgur.com/yxddi.png https://i.stack.imgur.com/yxddi.png
Note that my timezone is Brussels, so it may appear differently for you.请注意,我的时区是布鲁塞尔,因此对您来说可能会有所不同。
I have made a codepen to show the problems: https://codepen.io/Benjamin-Mampaey/pen/NoPLyd我制作了一个代码笔来显示问题: https ://codepen.io/Benjamin-Mampaey/pen/NoPLyd
var data = [
{'date': '2018-10-28T00:00:00Z', 'value': 0},
{'date': '2018-10-28T00:30:00Z', 'value': 0.5},
{'date': '2018-10-28T01:00:00Z', 'value': 1},
{'date': '2018-10-28T01:30:00Z', 'value': 1.5},
{'date': '2018-10-28T02:00:00Z', 'value': 2},
{'date': '2018-10-28T02:30:00Z', 'value': 2.5},
{'date': '2018-10-28T03:00:00Z', 'value': 3},
{'date': '2018-10-28T03:30:00Z', 'value': 3.5},
{'date': '2018-10-28T04:00:00Z', 'value': 4},
{'date': '2018-10-28T04:30:00Z', 'value': 4.5},
];
var config = {
"type": "XYChart",
"data": data,
"xAxes": [{
"type": "DateAxis",
"tooltipDateFormat": "i",
"dateFormats": {
"minute": "HH:mm:ss Z",
"hour": "HH:mm:ss Z",
},
"periodChangeDateFormats": {
"minute": "i",
"hour": "i",
},
"renderer": {
"labels": {
"rotation": 90,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
},
}],
"yAxes": [{
"type": "ValueAxis",
"renderer": {
"minGridDistance": 10
},
}],
"series": [{
"type": "LineSeries",
"dataFields": {
"dateX": "date",
"valueY": "value"
},
"bullets":[{
"type": "CircleBullet",
}],
"tooltipText": "{dateX.formatDate('i')}\n{dateX.formatDate('HH:mm:ss Z')}",
}],
"dateFormatter": {
"inputDateFormat": "i",
},
"cursor": {
},
};
var chart = am4core.createFromConfig(config, "chartdiv");
The problems that I see are:我看到的问题是:
In AmCharts 3, it was only needed to set AmCharts.useUTC = true for this to work, but in AmCharts 4 I don't understand how to do the same thing.在 AmCharts 3 中,只需要设置 AmCharts.useUTC = true 即可使其工作,但在 AmCharts 4 中我不明白如何做同样的事情。 I tried setting "utc: true" on the dateFormatter, but it does not change anything.我尝试在 dateFormatter 上设置“utc: true”,但它没有改变任何东西。
Documentation to do this on amcharts4 is here: https://www.amcharts.com/docs/v4/reference/dateformatter/#utc_property在 amcharts4 上执行此操作的文档在这里: https ://www.amcharts.com/docs/v4/reference/dateformatter/#utc_property
There is a property called utc on dateformatter dateformatter 上有一个名为 utc 的属性
I have posted the questions on the github, and they are looking into it.我已经在github上发布了问题,他们正在调查。
https://github.com/amcharts/amcharts4/issues/908 https://github.com/amcharts/amcharts4/issues/908
https://github.com/amcharts/amcharts4/issues/903 https://github.com/amcharts/amcharts4/issues/903
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.