簡體   English   中英

Flot Chart-基於數據點的單個折線圖上的不同顏色

[英]Flot Chart - different color on single line chart based on data points

基本上,我使用MySQL的AJAX提取數據以繪制折線圖。 現在,我希望基於數據為折線圖上的點設置不同的顏色。 就像數據落在該范圍內一樣,它將是一種不同的顏色,而超出范圍則它將是一種不同的顏色。 請有人建議或指導。 下面使用的代碼:

我嘗試使用下面提供的Flot閾值插件,但無法正常工作。

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);

沒有colors屬性, colorthreshold屬性屬於series屬性。 將您的選項更改為此:

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

顯示工作圖表的小提琴

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM