Tooltip für flot-bar-chart

ich bin mit flot API zum erstellen von Balkendiagrammen. Ich bin erfolgreich im zeichnen von Balkendiagrammen.Aber ich bin nicht immer der tooltip für diese Diagramme.Ich habe versucht, eine Menge, aber ich habe versäumt, dies zu erreichen.
Mein code ist:

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

Mir bitte helfen in dieser Hinsicht.

  • Verwenden Sie QuickInfo-Komponente von Twitter Bootstrap oder ähnliche frameworks.
  • Sie fordern die 'showTooltip' Methode in Ihrer plothover Ereignis, aber ich sehe nicht, wo diese Funktion ist im code definiert werden. Haben Sie eine 'showTooltip' - Funktion, die Sie sich nicht uns zeigen? oder ist es einfach nur undefiniert?
InformationsquelleAutor Firoz | 2014-01-23
  1. 8

    Nicht sicher, was Sie versuchen zu erreichen mit 

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

    Aber versuchen Sie ersetzen mit diesem:

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

    Demo

    InformationsquelleAutor Sergio
  2. 3

    Dein code ist fast ok, es ist nur eine einzige Frieden fehlt.

    Verstehen, was Frieden ist und warum es fehlt, sollten Sie zuerst verstehen, was 'Prototyp' ist und wie jQuery verwenden. In kurzen Worten - Prototyp und Objekt, das definiert die Standard-Eigenschaftswerte/methodenimplementierungen für ein anderes Objekt. '$.fn' in jQuery ist der kurze Verweis auf den Prototyp. So ruft 

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

    wird die Erstellung von Standard-Implementierung für die Funktion UseTooltip für alle Objekt-erstellt von jQuery - Z. B. jetzt können Sie rufen Sie $(someSelector).UseTooltip(einige Parameter).

    Ist das wichtigste in deinem code ist in der Tatsache, dass, obwohl Sie definiert wird diese Funktion nie aufgerufen hat. Dies bedeutet, dass Sie nicht Anhängen, tooltip, um Ihre Balkendiagramm. Fügen Sie einfach:

    $("#placeholder2").UseTooltip()

    Dieses sollten Sie lösen problem.

    InformationsquelleAutor Dmitry
Schreibe einen Kommentar