5

我似乎无法弄清楚为什么 x 轴上的时间总是落后一个小时。

我知道它与这条线有关，但我不知道要改成什么。

 date = Date.parse(line[0] + ' UTC');

我当前的时区是伦敦。

我有这个文件：index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Using Highcharts with PHP and MySQL</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/gray.js"></script>

<script type="text/javascript">
    var chart;
                    $(document).ready(function() {
                            var options = {
                                    chart: {
                                            renderTo: 'container',
                                            defaultSeriesType: 'line',
                                            marginRight: 130,
                                            marginBottom: 25
                                    },
                                    title: {
                                  text: 'Temperature for the last hour',
                                            x: -20 //center
                                    },
                                    subtitle: {
                                            text: '',
                                            x: -20
                                    },
                                    xAxis: {
                                            type: 'datetime',
                                            tickInterval: 3600 * 1000, // one hour
                                            tickWidth: 0,
                                            gridLineWidth: 1,
                                            labels: {
                                                    align: 'center',
                                                    x: -3,
                                                    y: 20,
                                                    formatter: function() {
                                                            return Highcharts.dateFormat('%H:%M', this.value);
                                                    }
                                            }
                                    },
                                    yAxis: {
                                            title: {
                                                    text: 'Temperature'
                                            },
                                            plotLines: [{
                                                    value: 0,

                                                   width: 1,
                                                    color: '#808080'
                                            }]
                                    },
                                    tooltip: {
                                            formatter: function() {
                                            return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +': <b>'+ this.y + '</b>';
                                            }
                                    },
                                    legend: {
                                            layout: 'vertical',
                                            align: 'right',
                                            verticalAlign: 'top',
                                            x: -10,
                                            y: 100,
                                            borderWidth: 0
                                    },
                                    series: [{
                                            name: 'Temperature'
                                    }]
                            }
                            // Load data asynchronously using jQuery. On success, add the data
                            // to the options and initiate the chart.
                            // This data is obtained by exporting a GA custom report to TSV.
                            // http://api.jquery.com/jQuery.get/
                            jQuery.get('data.php', null, function(tsv) {

                              var lines = [];
                                    traffic = [];
                                    try {
                                            // split the data return into lines and parse them
                                            tsv = tsv.split(/\n/g);
                                            jQuery.each(tsv, function(i, line) {
                                                    line = line.split(/\t/);
                                                    date = Date.parse(line[0]);
                                                    traffic.push([
                                                            date,
                                                            parseFloat(line[1].replace(',', ''), 10)
                                                    ]);
                                            });
                                    } catch (e) {  }
                                    options.series[0].data = traffic;
                                    chart = new Highcharts.Chart(options);
                            });
                    });
</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

</body>
</html>

我试过摆弄像这样的设置

date = Date.parse(line[0] + ' Europe/London');

date = Date.parse(line[0] + ' London');

我也试过把它放在 php 文件的顶部：

<?php date_default_timezone_set('Europe/London'); ?>

data.php 吐出：

2013-09-15 11:49:42 18.3 2013-09-15 11:52:42    18.4 2013-09-15 11:55:42    18.4 2013-09-15 11:58:42    18.4 2013-09-15 12:01:42    18.3 2013-09-15 12:04:42    18.5 2013-09-15 12:07:42    18.6 2013-09-15 12:10:43 18.6 2013-09-15 12:13:43   18.8 2013-09-15 12:16:43    19 2013-09-15 12:19:43  19.3 2013-09-15 12:22:43    19.4 2013-09-15 12:25:43    19.5 2013-09-15 12:28:43    19.6 2013-09-15 12:31:43    19.8 2013-09-15 12:34:45 20.1 2013-09-15 12:37:43   20.1 2013-09-15 12:40:43    20.2 2013-09-15 12:43:43    20.3 2013-09-15 12:46:43    20.3

时间正确的地方。

我现在添加了：

    Highcharts.setOptions({
            global: { useUTC: false }
                    });

刻度线是正确的，但工具提示上显示的时间仍然落后一小时。

更新：发现问题 - 我需要按照建议添加 useUTC: false 选项，然后也更改以下行：

 return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +': <b>'+ this.y + '</b>';

至

 return Highcharts.dateFormat('%H:%M', this) +': <b>'+ this.y + '</b>';
4

3 回答 3

3

伦敦在夏季使用 BST，在冬季使用 GMT。见：这里

BST 相当于 UTC +1。出于这个原因，这是需要了解的重要信息：您返回的结果是 UTC，而不是 BST。如果您希望检索本地时间，则需要为 useUTC 设置全局选项：false。见：这里。

此页面提供了如何正确设置全局选项的示例：链接

本质上，您需要添加以下内容：

global: {
  useUTC: false
}
于 2013-09-15T12:39:30.900 回答
1

对我来说useUTC: false已经足够了。也许你也可以试试timezoneOffset。但对我来说，它适用于useUTC.

我的完整代码如下所示：

Highcharts.setOptions({
    global: {
        // timezoneOffset: +1,
        useUTC: false
    }
});

更多信息将在文档中 - http://api.highcharts.com/highcharts#global

于 2014-12-30T23:17:11.740 回答
0

除了useUTC在 Highcharts 的global选项中设置外，还可以按实例设置。因此，将其设置为timeofoptions也可以：

const options: Highcharts.Options = {
  time: {
    timezone: 'Europe/Berlin',
    useUTC: optionFalse,
  },
};

请参阅Highcharts 配置选项useUTC: boolean。

于 2021-02-11T15:43:30.727 回答