如何根據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 

產地：