绘制图表。自定义颜色低于x轴值

Question

我有一个Flot Bar Chart代码。

$(function() {  
        var barOptions = {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.4,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.8
                        }, {
                            opacity: 0.8
                        }]
                    }
                }
            },
            xaxis: {
                mode: "categories",
                tickLength: 0 
            },              
            yaxis: {
                min:-200, max: 200,  tickSize: 50,
            },
            colors: ["#1ab394"],
            grid: {
                color: "#999999",
                hoverable: true,
                clickable: true,
                tickColor: "#D4D4D4",
                borderWidth:0
            },
            legend: {
                show: false
            },
            tooltip: true,
            tooltipOpts: {
                content: "Cost: %y %"
            }
        };

        var barData = {
            label: "bar",
            data: [         
            ["First", -100],["Second", 66.67],["Third", -177.77],]

        };

        $.plot($("#flot-bar-chart"), [barData], barOptions);            

    });

我希望0以下的每个条形都是特定的（例如红色）颜色。我试图用阈值插件做到这一点，但它增加了额外的值。有没有解决方案呢？

Answer 1

阈值插件不应添加其他值，请参阅此fiddle或以下代码段：

＆＃13;

＆＃13;

$(function() {
    var barOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.4,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.8
                    }, {
                        opacity: 0.8
                    }]
                },
                align: 'center'
            }
        },
        xaxis: {
            mode: "categories",
            tickLength: 0,
            ticks: [
                [1, 'First'],
                [2, 'Second'],
                [3, 'Third']
            ]
        },
        yaxis: {
            min: -200,
            max: 200,
            tickSize: 50,
        },
        colors: ["#1ab394"],
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            tickColor: "#D4D4D4",
            borderWidth: 0
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: "Cost: %y %"
        }
    };

    var barData = {
        label: "bar",
        data: [
            [1, -100],
            [2, 66.67],
            [3, -177.77],
        ],
        threshold: {
            below: 0,
            color: "rgb(200, 20, 30)"
        },
    };

    $.plot($("#flot-bar-chart"), [barData], barOptions);

});

＆＃13;

#flot-bar-chart {
    height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script>
<div id="flot-bar-chart"></div>

＆＃13;

＆＃13;

＆＃13;