So legen Sie PointIntervals pro Monat in HighChart fest

Question

Ich habe HighCharts verwendet, um die Anzahl der monatlich erstellten Benutzer zu plotten. Ich schaffte Monat in x-Achse zu zeigen, und i gesetzt pointInterval wie unten

pointInterval: 24 * 3600 * 1000 * 31

Aber das war blind gegeben und es wird nicht Punkte korrekt darzustellen. Ich muss jeden ersten Monat Punkte sammeln. Aber das obige Intervall hilft, Punkte auf monatlicher Basis nicht am ersten Tag des Monats zu binden. Dieses example beschreibt mein Problem. Tooltip gibt die klare Idee. Hier ist mein Code

series: [{ 
     type: 'area', 
     name: 'CDP Created', 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01),   
     dataGrouping: { 
      enabled: false 
     }, 
     data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }] 

Gibt es trotzdem pointInterval hängt von Monat einzustellen. Denn wenn ich einfach pointInterval wie oben angegeben gebe, wird es alle 31 Tage berechnet. Dies verursacht ein Problem, wenn der Monat 28 oder 30 Tage hat. Wie man es erreicht. Wenn Sie auch die Breite des Container-Div anpassen, werden die x-Achsenwerte nicht richtig angezeigt. Vielen Dank im Voraus

Answer 1

Leider ist es nicht möglich - pointInterval wird nur um die angegebene Zahl erhöht, so dass ein unregelmäßiger Wert nicht möglich ist. Sie können jedoch direkt x-Wert eingestellt, siehe: http://jsfiddle.net/kUBdb/2/

Die gute Sache über JS ist, dass

Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10) 

gibt true zurück, so dass Sie frei Monat um eins erhöhen kann.

Answer 2

Sie können den Xaxis-Wert (nach Monat) dynamisch auffüllen und zusammen mit yxais-Daten pushen. Der Code wäre wie folgt:

var s = {name: 'serial name', data: []}, 
    serialData = [], categories = []; 
var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], 
    startDate = Date.UTC(2000, 1, 1); 
// Set the xaxis value as first day of month 
for (var i = 0; i < flatData.length; i++) { 
    var d = new Date(); 
    d.setTime(startDate); 
    d.setMonth(d.getMonth() + i); 
    categories.push(d.getTime()); 
} 
for (var i = 0; i < flatData.length; i++) { 
    s.data.push([categories[i], flatData[i]]); 
} 
serialData.push(s); 

$('#canvas').highcharts({ 
    ...... 
    xAxis: { 
     type: 'datetime', 
    } 
    serial: serialData 
}); 

Dann wären die Xaxis-Labels "pro Monat". Hier ist das Beispiel: JSFiddle. Die Idee wird von hier importiert: HighCharts Demo.

Answer 3

Sie können manuell Datum Tags generieren und an der Datenliste wie folgt hinzu:

series: [{ 
     data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]], 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01)   
    }] 

Auf diese Weise können Sie die pointInterval verwenden, wie (für ungefähre Ansicht auf der x-Achse), und verwenden Sie die Markieren Sie die Diagrammpunkte (für die genauen Daten).

Wenn Sie in das Diagramm zoomen, sehen Sie eine leichte Überlappung zwischen den Punkten und den X-Achsen-Ticks, aber wenn Sie keine perfekte Ausrichtung benötigen, sollte dies den Trick tun.

Um die Datumsvariablen (zum Beispiel „1. Januar 2005“) erzeugen ich so etwas tun würde:

var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]; 
var date = new Date("January 1, 2005"); 
var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

for (i = 0; x < data.length; i++) 
{ 
    var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear(); 
    resultList.push(stringDate); 
    date.setMonth(date.getMonth() + 1); 
} 

Dann fügen Sie jedes Element auf die Daten.

Bearbeitet: Ich denke, die erste Antwort oben ist eine sehr übersichtliche Möglichkeit, Datums-Tags zu generieren. (Überprüfen Sie das JSFiddle)