帶有Codeigniter的浮標“工具提示”圖

Question

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

我的圖表的工作方式是，我按月計算加入的用戶數，然后按$data計數回顯到視圖。

問題：當我將鼠標懸停在每個欄上時，如果可能的話，我希望能夠顯示帶有該月計數的引導工具提示 。

腳本在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插件添加到頁面並將其添加到options對象：

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>