2

我现在有几天的库存,试图使用 Angular2-HighCharts 在面积图中更改 UTC 时间。我的后端 Api 向我返回了一些时间戳,然后我将其注入图表中,并且每次在“人类时间”中转换时少了两个小时,我知道 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>
4

1 回答 1

2

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

文档中有关于如何访问静态 Highcharts 方法的说明:

const Highcharts = require('highcharts');

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

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

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

于 2017-07-18T11:26:14.500 回答