Javascript flot条形图的工具提示

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

    $(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;
                }
            });
        };

$（函数（）{
变量a1=[
[0, 100],
[1, 200],
[2,300],
[3,400],
[4,500]
];
变量a2=[
[0, 90],
[1, 150],
[2,250],
[3,380],
[4,450]
];
//var ticks=[[0，“总体”]，[1，“海洋”]，[2，“印度”]，[3，“国家能源局”]，[4，“太平洋地区”]；
风险值数据=[
{
标签：“转换前”，
数据：a1
},
{
标签：“转换后”，
数据：a2
}
];
$.plot（$（“#占位符2”），数据{
系列：{
酒吧：{
秀：没错，
杆宽：0.13，
订单：1
}
},
xaxis：{
记号：[[0，“总体”]，[1，“海洋”]，[2，“印度”]，[3，“国家能源局”]，[4，“太平洋”]]
//长度：0
},
网格：{
悬停：是的，
可点击：正确
  
//mouseActiveRadius:30//指定鼠标可以激活项目的距离
},
值标签：{
秀：真的
}
});
});
var previousPoint=null，previousLabel=null；
函数显示工具提示（x、y、颜色、内容）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y-40，
左:x-120,，
边框：“2倍纯色”+彩色，
填充：“3px”，
“字体大小”：“9px”，
“边界半径”：“5px”，
“背景色”：“fff”，
“字体系列”：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
不透明度：0.9
}).appendTo（“body”）.fadeIn（200）；
}
$.fn.UseTooltip=函数（）{
$（this）.bind（“plothover”，函数（事件、位置、项目）{
如果（项目）{
if（（previousLabel！=item.series.label）| |（previousPoint！=item.dataIndex））{
previousPoint=item.dataIndex；
previousLabel=item.series.label；
$（“#工具提示”）.remove（）；
var x=项目数据点[0]；
变量y=项目数据点[1]；
var color=item.series.color；
//console.log（item.series.xaxis.ticks[x].label）；
显示工具提示（item.pageX，
项目1.pageY，
颜色
“”+item.series.label+”
“+item.series.xaxis.ticks[x].label+”：“+y+”°C”）；
}
}否则{
$（“#工具提示”）.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

---

您的代码几乎正常，只缺少一个和平

要了解什么是和平以及为什么缺少和平，您应该首先了解什么是“”以及jQuery如何使用它。简言之，prototype是定义其他对象的默认属性值/方法实现的对象。“$。jQuery中的“fn”是对原型的简短引用。这么叫

$.fn.UseTooltip = function () { ... }

将为jQuery创建的所有对象创建函数UseTooltip的默认实现-例如，现在您可以调用$（someSelector）.UseTooltip（一些参数）

代码中重要的一点是，尽管定义了这个函数，但从未调用过它。这意味着您没有将工具提示附加到条形图。只需添加：

$("#placeholder2").UseTooltip()

---

这应该可以解决您的问题。

使用工具提示组件是Twitter引导或任何此类框架。您正在plothover事件中调用“showTooltip”方法，但我看不到该函数在代码中的定义位置。您是否有一个“showTooltip”功能，但您没有向我们展示？或者只是没有定义？这个演示非常有用