Highcharts - 休息1小时

时间:2013-09-15 11:50:01

标签: javascript php highcharts

我似乎无法弄清楚为什么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>';

3 个答案:

答案 0 :(得分:2)

伦敦在夏季使用BST,在冬季使用GMT。请参阅:here

BST相当于UTC +1。这是因为这个原因知道的重要信息:你得到的结果是UTC,而不是BST。如果要检索本地时间,则需要为useUTC设置全局选项:false。见:here

此页面提供了如何正确设置全局选项的示例:link

基本上,您需要添加以下内容:

global: {
  useUTC: false
}

答案 1 :(得分:0)

对我来说useUTC: false是真的..也许你也可以尝试timezoneOffset但是对我来说它仍适用于useUTC。

我的完整代码如下:

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

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

答案 2 :(得分:0)

除了在 Highcharts 的 useUTC 选项中设置 global 之外,它还可以按实例设置。因此,将其设置在 timeoptions 中也同样有效:

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

Highcharts Configuration Options useUTC: boolean