Flot Chart - verschiedene Farbe auf Single-Line-Diagramm basierend auf Datenpunkten

Question

Grundsätzlich ziehe ich Daten mit AJAX von MySQL, um Liniendiagramm zu zeichnen. Jetzt möchte ich verschiedene Farben für Punkte auf meinem Liniendiagramm basierend auf Daten. Wenn Daten in den Bereich fallen, wird es eine andere Farbe und außerhalb des Bereichs eine andere Farbe haben. Jemand bitte vorschlagen oder führen. Code unten verwendet:

Ich habe versucht, Flot Threshold-Plugin verwenden, die unten verfügbar ist, aber es funktioniert nicht.

var offset = 0; 
//plot(html); 
var options = { 
    colors: ["#3fcf7f"], 
    threshold: { 
     below: 200, 
     colors: ["#ff7070"] 
    }, 
    series: { 
     lines: { 
      show: true, 
      lineWidth: 1, 
      fill: true, 
      fillColor: { 
       colors: [{ 
        opacity: 0.0 
       }, { 
        opacity: 0.2 
       }] 
      }, 
     }, 
     points: { 
      radius: 5, 
      show: true 
     }, 
     shadowSize: 2 
    }, 
    grid: { 
     color: "#fff", 
     hoverable: true, 
     clickable: true, 
     tickColor: "#f0f0f0", 
     borderWidth: 0 
    }, 
    //colors: ["#ff7070"], 
    xaxis: { 
     mode: 'time', 
     timeformat: '%d/%m/%y', 
     //rotateTicks: 90 
    }, 
    yaxis: { 
     ticks: 5, 
     tickDecimals: 0, 
    }, 
    tooltip: true, 
    tooltipOpts: { 
     content: "%y.1 on %x.4", 
     defaultTheme: false, 
     shifts: { 
      x: 0, 
      y: 20 
     } 
    } 
}; 
console.log(html.data); 
console.log(html.data[0][0]); 
data.push(html); 
// A null signifies separate line segments 

$.plot("#flot-color", data, options); 

Answer 1

Es gibt keine colors Eigenschaft und die color und threshold Eigenschaften gehören in der series Eigenschaft. Ändern Sie Ihre Optionen für:

var options = { 
    series: { 
     color: "#3fcf7f", 
     threshold: { 
      below: 200, 
      color: "#ff7070" 
     }, 
     lines: { 
     ... 

Fiddle, die ein Arbeitsdiagramm zeigt.