jquery - 当 X 轴为百分比值时，在条形图上显示实际数字（Flot 条形图）

Question

是否可以让轴显示来自系列数据的百分比值，但条形内部显示为 Flot 水平条形图中的实际值

Answer 1

我创建了一个不错的小插件：

jsBin 演示

（金色是元素的 BG 颜色，而 jQuery 为同一元素的 BG 图像设置动画（grad.azure one））

<div class="bar">66%</div>
<div class="bar bar5">4.5</div>

基本的CSS：

.bar{
  width:300px;
  height:20px;
  background:#444 url(barBG.jpg) 0px 0px no-repeat;
  color:#fff;
}

小提示：确保您的 BG 图像的宽度至少与元素所需的宽度一样宽，因此 eg0%将被完全覆盖。

jQuery插件：

(function($){
  $.fn.bars = function( opts ) {  
    var set = $.extend( {
      'max': 100
    }, opts );
    return this.each(function(){ 
      var $this = $(this);
      var barW = $this.width();
      var val = parseFloat( $this.text().replace(',','.') );
      var ratio = ( val/set.max*barW );          
      $this.stop().animate({backgroundPosition: ratio+'px'},600);             
    });
  };
})(jQuery);

$('.bar').bars(); // default rates = 100
$('.bar5').bars({max:5});