如何根据jqplot中的阈值更改条形颜色? [英] 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];

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

对于上面指定的值，-200以下(-260的条)的条应为红色.有没有办法在jqplot中做到这一点?

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?

注意: 我知道jqplot会将条形更改为负值，就像将阈值设置为0一样.但是我有一个非零阈值.

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.

请帮助！

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

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

提前谢谢！

推荐答案

这是一个hack，但这是我梦dream以求的最佳解决方案.您可以覆盖jqplot颜色生成器，因此您将根据数组值返回颜色.

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

产生:

这篇关于如何根据jqplot中的阈值更改条形颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！