Flot-Diagramm mit Threshold und Fillbetween

Question

Ich suche nach Rat, wie soll ich/können Flotcharts konfigurieren, dass die Fillbetween und Threshold pluggins mit einem Diagramm zu erstellen, die Folgendes erreicht:

1. Plot ein Liniendiagramm. (fertig)
2. Legen Sie einige Schwellenwerte fest. (erledigt)
3. Stellen Sie Werte ein, die außerhalb der Schwellenwerte liegen, und füllen Sie sie. (Nicht ganz fertig)

Hier ist, was ich bisher erreicht,

https://jsfiddle.net/gstoa/utv4kvw2/

$(function() { 
    var values = { 
    'avgBottom': [ 
     [1, -2], 
     [2, -2], 
     [3, -2], 
     [4, -2], 
     [5, -2] 
    ], 
    'avgTop': [ 
     [1, 3], 
     [2, 3], 
     [3, 3], 
     [4, 3], 
     [5, 3] 
    ], 
    'values': [ 
     [1, .5], 
     [2, -3], 
     [3, .8], 
     [4, 4.5], 
     [5, 6.6] 
    ] 
    }; 

    var dataset = [{ 
    data: values['values'], 
    lines: { 
     show: true 
    }, 
    color: "rgb(50,50,255)" 
    }, { 
    id: 'avgBottom', 
    data: values['avgBottom'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: false 
    }, 
    color: "rgb(50,50,255)" 
    }, { 
    id: 'values', 
    data: values['values'], 
    lines: { 
     show: true, 
     lineWidth: 0.5, 
     fill: 0.2, 
     shadowSize: 0 
    }, 
    color: "rgb(50,50,255)", 
    fillBetween: 'avgBottom' 
    }, { 
    id: 'avgTop', 
    data: values['avgTop'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: 0.2 
    }, 
    color: "rgb(50,50,255)", 
    fillBetween: 'values' 
    }]; 

    $.plot($("#placeholder"), dataset, { 
    xaxis: { 
     tickDecimals: 0 
    }, 
    series: { 
     lines: { 
     show: true, 
     fill: true 
     }, 
     points: { 
     show: false, 
     radius: 4 
     }, 
     color: "#62CB31", 
     //  threshold: { 
     //  below: -2, 
     //  color: "rgb(255,0,0)" 
     //  } 
    }, 
    yaxis: { 
     tickFormatter: function(v) { 
     return v; 
     } 
    } 
    }); 

    $.plot($("#placeholder"), [d1, d2, d3]); 
}); 

ich dieses Liniendiagramm wie die folgenden aussehen mag:

Jeder Rat wird sehr geschätzt.

Answer 1

Um dies zu tun, musste ich von der fillbetween auf die fillbelow Flot-Plugin wechseln. Ich musste dann die Quelle des fillbelow Plugins ändern, um eine neue fillColor Eigenschaft der Serie zu betrachten (ich habe eine Pull-Anfrage, um diese Änderungen wieder in den Hauptzweig einzufügen).

Alles in allem sieht Ihr neuer Datensatz wie das folgende Code-Snippet aus (this JSFiddle zeigt, wie das Diagramm so aussieht, wie Ihr Beispielbild).

var dataset = [{ 
    id: 'topValues', 
    data: values['values'], 
    lines: { 
     show: true, 
    }, 
    color: "rgb(50,50,255)", 
    fillBelowTo: 'avgTop', 
    fillBelowUseSeriesObjectFillColor: false, 
    fillColor: "#FF0000" 
}, { 
    id: 'avgTop', 
    data: values['avgTop'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: true 
    }, 
    color: "rgb(50,50,255)" 
}, { 
    id: 'bottomValues', 
    data: values['values'], 
    lines: { 
    show: true, 
    lineWidth: 0, 
    shadowSize: 0 
    }, 
    color: "rgb(50,50,255)" 
}, { 
    id: 'avgBottom', 
    data: values['avgBottom'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: true, 
    }, 
    fillBelowTo: 'bottomValues', 
    fillBelowUseSeriesObjectFillColor: false, 
    fillColor: "#FF0000", 
    color: "rgb(50,50,255)" 
}]; 

• Die fillBelowTo Eigenschaft wirkt ähnlich wie die fillBetween Eigenschaft der fillbetween Plugin - es bedeutet, zu der Serie würden Sie unten füllen mögen.
• Die fillBelowUseSeriesObjectFillColor Eigenschaft (auf false) sagt uns nicht die lines.fillColor Farbe zu verwenden und stattdessen den fillColor Wert verwenden. Wenn fillBelowUseSeriesObjectFillColortrue wäre, würde die Farbe lines.fillColor verwendet werden (was in diesem Fall blau wäre).