Ich benutze ein Liniendiagramm. Ich füttere die Daten wie folgt:

 var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
 var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];

Oben ist die erste Zahl jedes Satzes die Woche des Jahres und ich versuche, die Daten der letzten 4 Monate anzuzeigen.

Wenn das Diagramm gezeichnet wird, sortieren Flot-Diagramme die Daten jedoch nach dem ersten Wert (niedrigster bis höchster Wert), wodurch alle Arten von Problemen auftreten. Anstelle von 4 Spalten in der Reihe gibt es jetzt 52, und die Zeilen sind ziemlich aus dem Ruder gelaufen.

Ich sehe in der Dokumentation nichts, was besagt, dass dies geschehen soll, und ich sehe auch nichts, was besagt, dass ich es verhindern kann. Damit die Daten jedoch aussagekräftig sind, dürfen sie nicht nachbestellt werden.

Gibt es eine Einstellung, von der ich nicht weiß, dass sie dieses Verhalten stoppen kann?

Bearbeiten: Hinzufügen von Plotcode

var plot = $.plot('#scheduled-actual-flot-line', [
    {
        label: 'Scheduled Hours',
        data: scheduled,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    },
    {
        label: 'Actual Hours',
        data: actual,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    }],
    {
        series: {
            lines: { show: true },
            points: { show: true },
            shadowSize: 0   // Drawing is faster without shadows
        },
        colors: ['#afd2f0', '#177bbb'],
        legend: {
            show: true,
            position: 'nw',
            margin: [15, 0]
        },
        grid: {
            borderWidth: 0,
            hoverable: true,
            clickable: true
        },
        yaxis: { ticks: 4, tickColor: '#eeeeee' },
        xaxis: { ticks: 12, tickColor: '#ffffff' }
    }
);
1
Sailing Judo 23 Aug. 2015 im 01:36

3 Antworten

Beste Antwort

Flot nimmt die x-Werte als Zahlen und zeigt / sortiert sie entsprechend. Wenn Sie das nicht möchten, können Sie den Modus Kategorie verwenden (siehe Beispiel und diese Geige mit Ihren Daten).

 xaxis: {
     //ticks: 12,
     tickColor: '#ffffff',
     mode: 'categories'
 }

PS: 12 Ticks sind möglicherweise nicht mit Ihren Daten verbunden, da nur 4 Datenpunkte definiert sind.

Dieser Flot liest standardmäßig alle Daten als Zahlen. hier in der Dokumentation.

3
Raidri supports Monica 24 Aug. 2015 im 09:55

Flot macht genau das, was es für ein Liniendiagramm (oder eine beliebige Art von x-y-Grafik) tun sollte. Es zeigt die letzten beiden Punkte Ihres Datensatzes auf der linken Seite, da 1 und 2 tatsächlich kleiner als 51 und 52 sind. Ich vermute, dass Sie versuchen, Daten anzuzeigen, die eine Jahresgrenze überschreiten. Sie müssen die ersten zwei Wochen des zweiten Jahres später als die letzten beiden des ersten Jahres machen. Sie könnten tatsächliche Daten anstelle von Wochennummern verwenden. In diesem Fall würde Flot gut damit umgehen. Dies würde Ihnen auch mehr Flexibilität bei der Beschriftung der x-Achse geben. Als schnelle Lösung fügen Sie einfach 52 zu den Daten des zweiten Jahres hinzu, z.

var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];
0
Stephen Thomas 22 Aug. 2015 im 23:38

Flotr-Beispiele verwenden eine for-Schleife, um zufällige Daten zu erstellen, sodass der erste Index immer sequentiell ist.

[[51,1700],[52, 1750],[1,1600],[2,1675]];

Ihre Arrays zeigen, dass flotr eine Sortierung für das Array durchführen muss, bevor die Datensätze als Linien, Balkendiagramme oder was auch immer gezeichnet werden.

Ich kann nur vorschlagen, dass Sie einen Zeitstempel aus den Monaten erstellen. In den Flotr-Einstellungen können Sie eine Zeiteinstellung vornehmen, um die Daten nach Ihren Wünschen zu formatieren.

Die andere Möglichkeit besteht darin, Ihre anomalen Daten (Monate) durch sequentielle Indizes zu ersetzen:

var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;
0
Data 22 Aug. 2015 im 22:53