flot條形圖的工具提示

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

演示

Answer 2

你的代碼幾乎沒問題，只缺少單一的和平。

要了解什么是和平及其缺失的原因，您首先應該了解“ 原型 ”是什么以及jQuery如何使用它。 簡而言之 - prototype和object定義了某些其他對象的默認屬性值/方法實現。 jQuery中的'$ .fn'是對原型的簡短引用。 所以打電話

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

將為jQuery創建的所有對象創建函數UseTooltip的默認實現 - 例如，現在你可以調用$（someSelector）.UseTooltip（some-parameters）。

代碼中最重要的事實是，雖然您定義了此函數，但您從未調用它。 這意味着您沒有將工具提示附加到條形圖。 只需添加：

$("#placeholder2").UseTooltip()

這應該可以解決你的問題。