Как изменить цвет бара на основе пороговых значений в jqplot?

Question

Есть ли способ установить / изменить цвет столбца на основе порогового значения в столбчатой ​​диаграмме.

var 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

Это взлом, но это было лучшее решение, которое я мог придумать.Вы можете переопределить генератор цветов 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

Производит: