Question

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

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

请帮助我。

Answer 1

不确定您想要实现的目标

$.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

Demo

Answer 2

你的代码几乎没问题，只缺少单一的和平。

要了解什么是和平及其缺失的原因，您应该首先了解＆＃39; prototype＆＃39;是jQuery如何使用它。简而言之 - prototype和object定义了某些其他对象的默认属性值/方法实现。＆＃39; $ FN＆＃39;在jQuery中是对原型的简短引用。所以打电话

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

将为jQuery创建的所有对象创建函数UseTooltip的默认实现 - 例如现在你可以调用$（someSelector）.UseTooltip（some-parameters）。

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

$("#placeholder2").UseTooltip()

这可以解决你的问题。

flot条形图的工具提示

2 个答案:

Demo