浮点条形图的工具提示 [英] Tooltip for flot bar chart

问题描述

我正在使用flot API来构建条形图.我已经成功地绘制了条形图.但是我没有得到这些图表的工具提示.我已经尝试了很多，但是我未能做到这一点. 我的代码是:

i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My code is:

    $(function () {
                var a1 = [
            [0, 100],
            [1, 200],
            [2,300],
            [3,400],
            [4,500]

        ];
        var a2 = [
            [0, 90],
            [1, 150],
            [2,250],
            [3,380],
            [4,450]
            ];

    //var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
            var data = [
                {
                    label: "Pre Transformation",
                    data: a1
                },
                {
                    label: "Post Transformation",
                    data: a2
                }



            ];

            $.plot($("#placeholder2"), data, {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.13,
                        order: 1
                    }
                },
                xaxis: {
                ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
                //tickLength: 0
                },
                    grid: {
              hoverable: true,
             clickable:true
      
             //mouseActiveRadius: 30  //specifies how far the mouse can activate an item
              },


                valueLabels: {
                    show: true
                }

           });

        });

     var previousPoint = null, previousLabel = null;

  function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 40,
                left: x - 120,
                border: '2px solid ' + color,
                padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }

        $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();

                        var x = item.datapoint[0];
                        var y = item.datapoint[1];

                        var color = item.series.color;

                        //console.log(item.series.xaxis.ticks[x].label);               

                        showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

在这方面请帮助我.

推荐答案

不确定您要使用

$.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {

但是尝试替换为:

$("#placeholder2").on("plothover", function (event, pos, item) {
    if (item) {
// and removing trailling } in the end

这篇关于浮点条形图的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！