浮图。自定义颜色低于x轴值

Question

我有一个Flot条形图代码。

$(function() { 
     var barOptions = { 
      series: { 
       bars: { 
        show: true, 
        barWidth: 0.4, 
        fill: true, 
        fillColor: { 
         colors: [{ 
          opacity: 0.8 
         }, { 
          opacity: 0.8 
         }] 
        } 
       } 
      }, 
      xaxis: { 
       mode: "categories", 
       tickLength: 0 
      },    
      yaxis: { 
       min:-200, max: 200, tickSize: 50, 
      }, 
      colors: ["#1ab394"], 
      grid: { 
       color: "#999999", 
       hoverable: true, 
       clickable: true, 
       tickColor: "#D4D4D4", 
       borderWidth:0 
      }, 
      legend: { 
       show: false 
      }, 
      tooltip: true, 
      tooltipOpts: { 
       content: "Cost: %y %" 
      } 
     }; 

     var barData = { 
      label: "bar", 
      data: [   
      ["First", -100],["Second", 66.67],["Third", -177.77],] 

     }; 

     $.plot($("#flot-bar-chart"), [barData], barOptions);    

    }); 

我希望每个低于0的条都是特定的（例如红色）颜色。我试图用阈值插件来做到这一点，但它增加了额外的值。有没有解决方案？

Answer 1

阈值插件不应该增加额外的价值，看到这个fiddle或下面的代码片段：

$(function() { 
 
    var barOptions = { 
 
     series: { 
 
      bars: { 
 
       show: true, 
 
       barWidth: 0.4, 
 
       fill: true, 
 
       fillColor: { 
 
        colors: [{ 
 
         opacity: 0.8 
 
        }, { 
 
         opacity: 0.8 
 
        }] 
 
       }, 
 
       align: 'center' 
 
      } 
 
     }, 
 
     xaxis: { 
 
      mode: "categories", 
 
      tickLength: 0, 
 
      ticks: [ 
 
       [1, 'First'], 
 
       [2, 'Second'], 
 
       [3, 'Third'] 
 
      ] 
 
     }, 
 
     yaxis: { 
 
      min: -200, 
 
      max: 200, 
 
      tickSize: 50, 
 
     }, 
 
     colors: ["#1ab394"], 
 
     grid: { 
 
      color: "#999999", 
 
      hoverable: true, 
 
      clickable: true, 
 
      tickColor: "#D4D4D4", 
 
      borderWidth: 0 
 
     }, 
 
     legend: { 
 
      show: false 
 
     }, 
 
     tooltip: true, 
 
     tooltipOpts: { 
 
      content: "Cost: %y %" 
 
     } 
 
    }; 
 

 
    var barData = { 
 
     label: "bar", 
 
     data: [ 
 
      [1, -100], 
 
      [2, 66.67], 
 
      [3, -177.77], 
 
     ], 
 
     threshold: { 
 
      below: 0, 
 
      color: "rgb(200, 20, 30)" 
 
     }, 
 
    }; 
 

 
    $.plot($("#flot-bar-chart"), [barData], barOptions); 
 

 
});

#flot-bar-chart { 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script> 
 
<div id="flot-bar-chart"></div>