如何更改 Angular2-HighCharts 中的时区?
How to change Time Zone in Angular2-HighCharts?
我已经储备了几天了,现在我正在尝试使用 Angular2-HighCharts 更改面积图中的 UTC 时间。我的后端 Api 返回一些时间戳,然后我将它注入图表中,每次它在 "human time" 中转换时少两个小时,我知道 highcharts 使用 UTC 时间但我目前处于 GMT+2作为奥斯陆时间。
我尝试在 SetOptions.global.timezoneOffset 中实现 "timezoneOffset" 并更改其中的值,但它并没有改变我的视图图表中的任何内容..也许我没有正确实现该值。
也许我也可以使用我电脑上的时间戳(Moment.js 库中的 getTimezoneOffset 和 Highcharts doc api 中一样,所以如果有人有想法?
这是我的 chart.ts:
constructor(public userService3: UserService3) {
this.options = {
title : { text : '' },
setOptions: ({
global: {
useUTC : true,
timezoneOffset: 2 * 60
}
}),
chart: { type: 'area'},
legend: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime',
startOnTick: false,
endOnTick: false,
tickInterval: 36e5 * 2, // two hours
},
yAxis: { min: 0,
max: 100 },
plotOptions: {
series: {
color: '#648e59',
fillOpacity: 0.8,
fillColor: '#648e59',
pointInterval: 36e5 * 2 // two hours
}
},
series: [{
name: 'Someone1',
data: [],
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription = this.userService3.getData().subscribe((data)
=> {
this.options.series[0].data = data.data.operating_details;
console.log(data);
});
}
ngOnDestroy() {
if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
这里是 html:
<chart [options]="options" (load)="saveInstance($event.context)">
</chart>
您可以通过 Highcharts.setOptions() 方法更改时区偏移量 - 它是一个静态 Highcharts 函数。
docs 中有关于如何访问静态 Highcharts 方法的解释:
const Highcharts = require('highcharts');
Highcharts.setOptions({
global: {
timezoneOffset: 2 * 60
}
});
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
Highcharts
)
],
})
我已经储备了几天了,现在我正在尝试使用 Angular2-HighCharts 更改面积图中的 UTC 时间。我的后端 Api 返回一些时间戳,然后我将它注入图表中,每次它在 "human time" 中转换时少两个小时,我知道 highcharts 使用 UTC 时间但我目前处于 GMT+2作为奥斯陆时间。 我尝试在 SetOptions.global.timezoneOffset 中实现 "timezoneOffset" 并更改其中的值,但它并没有改变我的视图图表中的任何内容..也许我没有正确实现该值。 也许我也可以使用我电脑上的时间戳(Moment.js 库中的 getTimezoneOffset 和 Highcharts doc api 中一样,所以如果有人有想法?
这是我的 chart.ts:
constructor(public userService3: UserService3) {
this.options = {
title : { text : '' },
setOptions: ({
global: {
useUTC : true,
timezoneOffset: 2 * 60
}
}),
chart: { type: 'area'},
legend: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime',
startOnTick: false,
endOnTick: false,
tickInterval: 36e5 * 2, // two hours
},
yAxis: { min: 0,
max: 100 },
plotOptions: {
series: {
color: '#648e59',
fillOpacity: 0.8,
fillColor: '#648e59',
pointInterval: 36e5 * 2 // two hours
}
},
series: [{
name: 'Someone1',
data: [],
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription = this.userService3.getData().subscribe((data)
=> {
this.options.series[0].data = data.data.operating_details;
console.log(data);
});
}
ngOnDestroy() {
if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
这里是 html:
<chart [options]="options" (load)="saveInstance($event.context)">
</chart>
您可以通过 Highcharts.setOptions() 方法更改时区偏移量 - 它是一个静态 Highcharts 函数。
docs 中有关于如何访问静态 Highcharts 方法的解释:
const Highcharts = require('highcharts');
Highcharts.setOptions({
global: {
timezoneOffset: 2 * 60
}
});
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
Highcharts
)
],
})