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 画像の幅が要素の希望する幅以上であることを確認してください。たとえば、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});