Flot-Chart, Unterschiedliche line-und point-Farben je nach Daten

Ich habe ein Liniendiagramm für die dis/likes. Die positiven Werte sollten eine dunklere grüne Grenze und rote Werte eine dunklere rote Grenze. Weiter den roten Punkten gefüllt werden sollte mit der Farbe rot, nicht grün.

Dies ist, wie es aussieht!
Flot-Chart, Unterschiedliche line-und point-Farben je nach Daten

Dies ist, wie es Aussehen sollte
Flot-Chart, Unterschiedliche line-und point-Farben je nach Daten

Nach ein paar Stunden konnte ich nicht bekommen, eine Lösung auf diese, so dass jede Hilfe ist willkommen. Hier der code, den ich habe:

$.plot("#curvePlaceholder", [{
    data: data,
    color: "#83ce16",
    threshold: {
        below: 0,
        color: "#c00000"
    },
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    }
}],
    {
    series: {
        lines: {
            show: true,
            fill: true
        },
        points: {
            show: true,
            fillColor: '#83ce16'
        }
    },
    grid: {
        hoverable: true,
        clickable: true,
        backgroundColor: 'transparent',
        color: 'transparent',
        show: true,
        markings: [
            { yaxis: { from: 0, to: 0 }, color: "#737374"}
        ],
        markingsLineWidth: 6
    },
    yaxis: {
        show: false,
        <?=$chart_data['ymin'];?>
        <?=$chart_data['ymax'];?>
    },
    xaxis: {
        show: false,
        min: -0.4
    }
});
Können Sie replizieren diese in ein jsfiddle? Oder zumindest sagen Sie uns, was data gleich?

InformationsquelleAutor tecmec | 2013-11-28

  1. 6

    Der einfachste Weg, um das Aussehen sind Sie nach ist, fallen die schwellenwertbestimmung plugin und teilen Sie es in zwei Serien:

    [{
    data: [[0,0],[5,1],[7,0]],
    color: "#83ce16",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#83ce16'
    }
},{                           
    data: [[7,0],[11,-1],[11,0]],
    color: "#c00000",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#c00000'
    }
}],

    Fiddle hier.

    InformationsquelleAutor Mark

  2. 1

    Wenn man mit einem Daten-array, können Sie dies auch tun, zum Beispiel:

    var dataset = [
    { label: "Success", data: convertedSuccessArray, points: { fillColor: "green" } },
    { label: "Failed", data: convertedFailedArray, points: { fillColor: "red" } }
];

    InformationsquelleAutor Slaphead

  3. 0

    Eigentlich, wenn Sie bleiben konnten, das thresholding-plugin, wenn Sie schalten Sie die fill-off auf die Punkte und erhöhen das 'lineWidth'. Würde ihm das Aussehen einer gefüllten Kreis in der Farbe für die Schwelle. Der Nachteil ist, dadurch entsteht eine größere Kreise als die Standard-Größe.

    points: {
    show: true,
    fill: false,
    lineWidth: 6
}
    Dieser Ansatz hat jedoch einen Nachteil, obwohl ich entdeckt habe. Die threshold-plugin erstellt Punkte, wo Ihre Grenzen und die Ihrer Daten zu treffen, so dass die Färbung der Punkte wird die Farbe dieser "fake" Daten-Punkte. Also behalte das im Hinterkopf. Dies ist ein bekanntes Problem mit dem threshold-plugin.

    InformationsquelleAutor samnau

Schreibe einen Kommentar