如何在Highcharts图表中显示月度数据?

时间:2016-03-11 10:26:34

标签: datetime highcharts format axis

看起来像一个愚蠢的问题。可能是。但我真的不明白。

我有大约30年的月度数据。我既不确定如何格式化数据,也不确定如何格式化Highcharts图。

数据格式的正确方法是什么?就像一个"运行月份",从1到433(及更多):

Date,Value
1,338.45
2,339.15
3,339.47

或以Date.UTC格式:

Date,Value
Date.UTC(1980,1,1),338.45
Date.UTC(1980,2,1),339.15
Date.UTC(1980,3,1),339.47

我做过类似的事,但不要认为这是一种好的风格:

Date,Value
1 Jan 1993,
2 Jan 1993,
3 Jan 1993,
4 Jan 1993,
5 Jan 1993,-4.19413878126
6 Jan 1993,
7 Jan 1993,

对于xAxis定义,我看到使用了不同的参数。但由于这取决于数据格式,因此不太确定要放在哪里:

xAxis: {
  type:"datetime",
  min: Date.UTC(1980, 1, 1),
  ...

非常感谢我提出的任何方向。

2 个答案:

答案 0 :(得分:4)

一条建议,如你所说:

  1. Date.UTC(1980,1,1) - 这是JavaScript函数,返回时间戳。例如Date.UTC(1980,1,1) - > 318211200000。我建议在数据输入中使用时间戳作为图表。 注意: JS的月份从0开始(0-> 1月1日,1月2日等)。

  2. min: Date.UTC(1980, 1, 1) - >这不是必需的,Highcharts lib足够智能计算xAxis上的极值,你不必设置它,除非你只想在图表上显示部分数据。

  3. 例如,我会使用这种格式:

    Date,Value
    318211200000,338.45
    320716800000,339.15
    323395200000,339.47
    

    请注意,所有格式都很好 - 我建议使用最简单的格式;)

答案 1 :(得分:2)

将teh xAxis设置为您拥有以下选项的时间段: 1.使用Date.UTC(年,月,日):

data: [
  [Date.UTC(2016, 0, 5), 4],
  [Date.UTC(2016, 1, 6), 6],
  [Date.UTC(2016, 1, 7), 9],

检查example

  1. 使用写为数字的日期,指定自1970年1月1日00:00:00以来的毫秒数。

    var xArr = [1455661712000,     1455661791000,     1455661869000,     1455661947000,   ];

  2. 检查example

    我希望这些有所帮助,否则请随时询问更多细节。