Wie man Jahreswerte auf xAxis in Highcharts

Question

anzeigen Ich denke, das ist eine ziemlich dumme Frage. Aber ich kämpfe seit einiger Zeit damit, nicht den richtigen Weg der Datenformatierung für meine Daten zu finden.

Ich habe jährlich Daten wie diese, die ich als solche angezeigt werden sollen - 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 

und mein Highcharts Code, der wie folgt aussieht:

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

Aber die xAxis zeigt nicht die Jahre, sondern einige "00: 00: 00.001". Ich habe viele verschiedene Formate für den Zeitstempel ausprobiert - "2001-1-1", "2001/1/1", "1/1/2001", "1-1-2001", "Date.UTC" (2001/2001). 1/1) ". Ich habe auch die "dateTimeLabelFormats" geändert. Aber alles vergebens. Es spuckt nicht "2001 - 2002 - 2003 - 2004" aus.

Here is a fiddle.

Was ist der richtige Weg, dies zu erreichen? Danke für Hinweise!

Answer 1

Sie hatten Probleme beim Parsen Ihrer Daten. Alle deine X-Werte waren nicht korrekt - das ist der Grund für dein Problem. Sie benötigen sie ein wenig anders zu analysieren, wenn Sie die richtigen Daten für Ihr Diagramm erhalten möchten:

$.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]); 
    } 
    } 
}); 

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: http://jsfiddle.net/pcpq6mtr/4/

Grüße,

Answer 2

Eine einfache Lösung kann Kategorien in xAxis gesetzt werden, wenn die Zeit fest ist.

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

Wenn die Zeit nicht festgelegt ist. Kategorien müssen dynamisch berechnet werden.