jqplot - 如何根据 jqplot 中的阈值更改条形颜色？

Question

有没有办法根据条形图中的阈值设置/更改条形颜色。

变量 s1 = [460, -260, 690, 820];

对于上面指定的值，低于 -200 的条(-260 的条)应该是红色的。有没有办法在 jqplot 中做到这一点？

注意: 我知道 jqplot 会更改负值的条形颜色，这类似于将阈值设置为 0。但我有一个非零阈值。

请帮忙!

下面是我用来生成条形图的代码

$(document).ready(function(){
    var s1 = [460, -260, 690, 820];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August'];

    var plot1 = $.jqplot('chart1', [s1], {
        animate: true,
        animateReplot: true,
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true,
                animation: {speed: 2500},
                varyBarColor: false,
                useNegativeColors: false
                }
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
        // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
        // Pad the y axis just a little so bars can get close to, but
        // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        },
        cursor: {
            show: false
        },
        canvasOverlay: {
            show: true,
            objects: [
                {horizontalLine: {
                    linePattern: 'dashed',
                    name: "threshold",
                    y: -250,
                    color: "#d4c35D",
                        shadow: false,
                        showTooltip: true,
                        tooltipFormatString: "Threshold=%'d",
                showTooltipPrecision: 0.5
                }}
            ]
        }
    });
});

提前致谢!

Answer 1

这是一个 hack，但它是我能想到的最佳解决方案。您可以覆盖 jqplot 颜色生成器，因此您可以根据数组值返回颜色。

// define our data array as global
var s1 = [460, -260, 690, 820];

// this is what the bar renderer calls internally
// to get colors, we can override the 
// jqplot defined one, to return custom color
$.jqplot.ColorGenerator = function(P)
{
    if (this.idx == null)
        this.idx = -1; // keep track of our idx

    this.next = function()
    {
        this.idx++; // get the next color
        if (s1[this.idx] < -200) // is the value in our data less 200
            return 'red';
        else
            return 'blue';
    }

    this.get = function() // this is not used but it needed to be defined
    { 
        return 'blue';
    }

}

为此，您需要设置选项:

varyBarColor: true

产生: