Question

我想这有点像一个愚蠢的问题。但是我很久以来一直在努力，没有找到正确的数据格式化方式。

我有这样的年度数据，我希望这样显示 - 2001,2002,2003，...：

time,lat,lon,Npp_1km
Date.UTC(2001/1/1),15,-90,1.266112766
Date.UTC(2002/1/1),15,-90,1.166646809
Date.UTC(2003/1/1),15,-90,1.020591489
Date.UTC(2004/1/1),15,-90,1.016010638
Date.UTC(2005/12/31),15,-90,1.08053617
Date.UTC(2006/12/31),15,-90,1.181195745

和我的Highcharts代码看起来像这样：

xAxis: {
  labels: {
    style: {
      color: "#666666"
    },
    x: 0
  },
  gridLineWidth: 1,
  gridLineDashStyle: 'Dot',
  tickWidth: 0,
  type: 'datetime'
},

但xAxis不显示年份，而是显示“00：00：00.001”。我为时间戳尝试了许多不同的格式 - “2001-1-1”，“2001/1/1”，“1/1/2001”，“1-1-2001”，“Date.UTC（2001/1） / 1）”。我也改变了“dateTimeLabelFormats”。但一切都是徒劳的。它没有吐出“2001 - 2002 - 2003 - 2004”。

Here is a fiddle

实现这一目标的正确方法是什么？谢谢你的任何提示！

Answer 1

解析数据时遇到问题。您的所有x值都不正确 - 这就是您遇到问题的原因。如果要为图表获取正确的数据，则需要稍微解析它：

$.get('data.csv', function(data) {
var temp = []
// Split the lines
var lines = data.split('\n');
// For each line, split the record into seperate attributes
$.each(lines, function(lineNo, line) {
  var items = line.split(',');
  if (lineNo !== 0) {
    items[0] = items[0].substring(items[0].indexOf('(') + 1, items[0].indexOf(')'));
    var x = new Date(items[0]),
      y = parseFloat(items[3]);
    if (!isNaN(y)) {
      x = x.getTime();
      options.series[0].data.push([x, y]);
    }
  }
});

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/pcpq6mtr/4/

此致

Answer 2

如果时间固定，可以在xAxis中放置一个简单的解决方案。

xAxis {
    categories:[2001,2002,2003,2004,2005,2006]
}

如果时间不固定。类别需要动态计算。

如何在Highcharts

2 个答案: