How to change Bar color based on threshold values in jqplot?

问题

Is there a way to set/change the bar color based on a threshold value in a bar chart.

var s1 = [460, -260, 690, 820];

For the values specified above, the bar for the one below -200 (bar for -260) should be red. Is there a way to do it in jqplot?

Note: I know jqplot changes the bar color for negative values which is something like setting the threshold as 0. But I have a non-zero threshold.

Please help!

Below is the code that I used for generating the bar chart

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

Thanks in advance!

回答1:

This is a hack but it was the best solution I could dream up. You can override the jqplot color generator, so you return a color based on the array value.

// 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';
    }

}

For this to work you need to set the option:

varyBarColor: true

Produces:

来源：https://stackoverflow.com/questions/9172857/how-to-change-bar-color-based-on-threshold-values-in-jqplot

标签

jqplot