如何在Angular2-HighCharts中更改时区?

时间:2017-07-18 08:23:11

标签: angular typescript highcharts angular2-highcharts

我现在已经存放了几天,试图使用Angular2-HighCharts更改区域图中的UTC时间。我的后端Api给我一些Timestamp然后我将它注入图表中,并且每次它转换为"人类时间"少了两个小时,我知道highcharts使用UTC时间,但我目前在GMT + 2作为奥斯陆时间。 我试图实现" timezoneOffset"在SetOptions.global.timezoneOffset中并更改其中的值,但它在我的视图中没有任何改变。可能我没有正确实现该值。  也许我也可以使用我的电脑上的时间戳(Moment.js库中的getTimezoneOffset和Highcharts doc api一样,所以如果有人有想法的话?

这是我的图表:

  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>

1 个答案:

答案 0 :(得分:2)

您可以通过Highcharts.setOptions()方法更改时区偏移 - 它是静态Highcharts函数。

docs中有一个解释如何访问静态Highcharts方法:

const Highcharts = require('highcharts');

Highcharts.setOptions({
  global: {
    timezoneOffset: 2 * 60
  }
});

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        Highcharts
      )
    ],
})

示例:http://plnkr.co/edit/oRuBmb46sUdbkMAnbStX?p=preview