Как изменить цвет бара на основе пороговых значений в 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 

производит: