图表。 x 轴值下方的自定义颜色

Question

我有一个 Flot 条形图代码。

$(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 或以下代码段：

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

});

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

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

图表。 x 轴值下方的自定义颜色

Flot Charts. Custom color below x-axis value

javascript

flot