使用codeigniter的Flot bar「工具提示」圖表

Question

我在我的codeigniter項目中使用了flot條形圖。

我的圖表工作方式是按月計算加入的用戶數量，然後通過$data回顯計數。

問題：當我將鼠標懸停在每個欄上時，如果可能，我希望能夠有一個引導工具提示 show with count屬於該月份。

腳本在WELCOME_MESSAGE視圖

<script type="text/javascript"> 
    var bar_data = { 
     data: [ 
      ["January", <?php echo $count_jan;?>], 
      ["February", <?php echo $count_feb;?>], 
      ["March", <?php echo $count_mar;?>], 
      ["April", <?php echo $count_apr;?>], 
      ["May", <?php echo $count_may;?>], 
      ["June", <?php echo $count_jun;?>], 
      ["July", <?php echo $count_july;?>], 
      ["August", <?php echo $count_aug;?>], 
      ["September", <?php echo $count_sept;?>], 
      ["October", <?php echo $count_oct;?>], 
      ["November", <?php echo $count_nov;?>], 
      ["December", <?php echo $count_dec;?>] 
     ], 

     color: "#3c8dbc" 
    }; 

    $.plot("#bar-chart", [bar_data], { 
     grid: { 
      borderWidth: 1, 
      borderColor: "#f3f3f3", 
      tickColor: "#f3f3f3" 
     }, 
     points: { 
      show: true 
     }, 
     series: { 
      bars: { 
       show: true, 
       fill: true, 
       barWidth: 0.4, 
       align: "center" 
      } 
     }, 
     xaxis: { 
      mode: "categories", 
      tickLength: 0 
     } 
    }); 
</script> 

例

public function count_jan() { 
    $this->db->where('month_joined_up', 'January'); 
    $query = $this->db->get('user'); 

    if ($query->num_rows() > 0) { 
     return $query->num_rows(); 
    } else { 
     return 0; 
    } 
} 

控制器

<?php 

    defined('BASEPATH') OR exit('No direct script access allowed'); 

    class Welcome extends CI_Controller { 

     public function index() 
     { 
      $data['count_jan'] = $this->count_jan();  
      $this->load->view('welcome_message', $data); 
     } 

     public function count_jan() { 
      $this->db->where('month_joined_up', 'January'); 
      $query = $this->db->get('user'); 

      if ($query->num_rows() > 0) { 
       return $query->num_rows(); 
      } else { 
       return 0; 
      } 
     } 
    } 

Answer 1

要做到這一點，最簡單的方法是將Flot Tooltip Plugin添加到您的網頁，並添加到您的選項對象：

grid: { 
    hoverable: true, 
    ... 
}, 
tooltip: { 
    show: true, 
    content: '%y new users in %x', 
    cssClass: 'name of the class you want to use for the tooltip' // optional 
} 

Answer 2

感謝@Raidri給我上的工具提示一個想法爲我海軍報吧圖我現在得到它與代碼下面

<script type="text/javascript"> 
$(document).ready(function() { 
$('#bar-chart').bind('plothover', function(event, pos, item) { 
$('.tooltip').remove(); 

if (item) { 
$('<div id="tooltip" class="tooltip top in"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + item.datapoint[1].toFixed(2) + '</div></div>').prependTo('body'); 

$('#tooltip').css({ 
position: 'absolute', 
left: item.pageX - ($('#tooltip').outerWidth()/2), 
top: item.pageY - $('#tooltip').outerHeight(), 
pointer: 'cusror' 
}).fadeIn('slow'); 

$('#bar-chart').css('cursor', 'pointer');  
} else { 
$('#bar-chart').css('cursor', 'auto'); 
} 
}); 
}); 
</script>