带有 codeigniter 的浮动条 "tool-tip" 图

Question

我在我的 codeigniter 项目中使用浮动条形图。

我的图表的工作方式是按月计算加入的用户数量，然后按 $data 将计数回显到视图。

问题：当我将鼠标悬停在每个栏上时，如果可能的话，我希望能够显示 bootstrap 工具提示 以及属于那个月的计数.

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>

带有 codeigniter 的浮动条 "tool-tip" 图

Flot bar "tool-tip" graph with codeigniter

javascript

codeigniter

flot