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

Question

是否可以让轴显示系列数据的％值，而条形图的内部显示为Flot水平条形图中的实际值

Answer 1

我创建了一个小巧的插件：

jsBin demo

（黄金是元素的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图像宽度至少为所需宽度的宽度，例如0%将完全覆盖。

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