Question

我有一个带有日期/时间x轴的折线图。这些点的名称将转换为本地时间。但是，刻度标记位于UTC午夜。我怎样才能让他们被安排在当地的午夜？

澄清一下，我的当地时间是美国东部时间（-04：00）。因此，在大约20:00，会显示刻度线。

var chart = Highcharts.chart('container', {
  "chart": {
    "type": "line",
    "height": 300,
    "marginLeft": 60,
    "marginRight": 0,
    "spacingLeft": 0,
    "spacingRight": 0,
    "style": {
      "fontSize": 14
    },
    "zoomType": "x"
  },
  "tooltip": {
    "pointFormat": "{point.y}",
    "style": {
      "fontSize": 14
    }
  },
  "exporting": {
    "enabled": false
  },
  "title": {
    "text": "",
    "style": {
      "display": "none"
    }
  },
  "subtitle": {
    "text": "",
    "style": {
      "display": "none"
    }
  },
  "legend": {
    "enabled": "false"
  },
  "xAxis": {
    "type": "datetime",
    "labels": {
      "enabled": true,
      "style": {
        "fontSize": "12px"
      }
    },
    "title": {
      "text": null
    },
    "minTickInterval": 86400000
  },
  "plotOptions": {
    "line": {
      "color": "#33aaee",
      "step": "true",
      "lineWidth": 1
    }
  },
  "credits": {
    "enabled": false
  },
  "series": [{
    "data": [{
      "x": 1499935040582,
      "y": 600.8919674194846,
      "name": "Jul 13, 2017 4:37 AM"
    }, {
      "x": 1500069665426,
      "y": 600.3026594460489,
      "name": "Jul 14, 2017 6:01 PM"
    }, {
      "x": 1500133689471,
      "y": 600.7274040373635,
      "name": "Jul 15, 2017 11:48 AM"
    }, {
      "x": 1500197550895,
      "y": 600.1197607401385,
      "name": "Jul 16, 2017 5:32 AM"
    }, {
      "x": 1500224766324,
      "y": 600.2311428390589,
      "name": "Jul 16, 2017 1:06 PM"
    }, {
      "x": 1500247544551,
      "y": 600.5511455212492,
      "name": "Jul 16, 2017 7:25 PM"
    }, {
      "x": 1500282216949,
      "y": 600.2677789206001,
      "name": "Jul 17, 2017 5:03 AM"
    }, {
      "x": 1500285249151,
      "y": 600.3165520296044,
      "name": "Jul 17, 2017 5:54 AM"
    }, {
      "x": 1500472917987,
      "y": 600.6858600814295,
      "name": "Jul 19, 2017 10:01 AM"
    }, {
      "x": 1500479945476,
      "y": 600.6974345877289,
      "name": "Jul 19, 2017 11:59 AM"
    }],
    "showInLegend": false,
    "allowPointSelect": true
  }]
});

这是一个显示这一点的小提琴。 Highcharts fiddle

Answer 1

将您的纪元更改为javascript日期[新日期（纪元）]这将使日期/时间字段以当地时间而非UTC显示。

"series": [{
    "data": [{
      "x": new Date(1499935040582),
      "y": 600.8919674194846
    }, {
      "x": new Date(1500069665426),
      "y": 600.3026594460489
    }, {
      "x": new Date(1500133689471),
      "y": 600.7274040373635
    }, {
      "x": new Date(1500197550895),
      "y": 600.1197607401385
    }, {
      "x": new Date(1500224766324),
      "y": 600.2311428390589
    }, {
      "x": new Date(1500247544551),
      "y": 600.5511455212492
    }, {
      "x": new Date(1500282216949),
      "y": 600.2677789206001
    }, {
      "x": new Date(1500285249151),
      "y": 600.3165520296044
    }, {
      "x": new Date(1500472917987),
      "y": 600.6858600814295
    }, {
      "x": new Date(1500479945476),
      "y": 600.6974345877289
    }],

这样可以使您的图表与当地时区保持同步

Answer 2

找到我的问题的答案。我正在使用moment.js来格式化时间数据，所以我将其改为：

chart.series[0].data.push({ x: moment(grp.Time).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });

为：

chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });

所以基本上我将“.utc（true）”添加到x值的时刻定义中。

使用highcharts api在本地时间在x轴上显示刻度

2 个答案: