簡體   English   中英

使用jquery-tooltip和flot chart

[英]use jquery-tooltip with flot charts

我按照例子使用jquery工具提示。 我在畫布上顯示了標題。 我不知道如何擺脫它。 甚至當我在畫布上盤旋時我也看到了。 請看我附上的圖片

$(function() {

    var $chart = $( "#placeholder" ),
        ttPos = $.ui.tooltip.prototype.options.position;

    $.plot(
        $chart, 
        [{
            label: "Number of users",
            data:[
                [ 1, 2233 ],
                [ 2, 1294 ],
                [ 3, 1658 ],
                [ 4, 1603 ],
                [ 5, 1790 ],
                [ 6, 2103 ]
            ]
        }],
        {
            series: {
                lines: { show: true },
                points: { show: true }
            },
            grid: {
                hoverable: true
            },
            legend: {
                show: false
            }
        }
    );

    $chart.bind( "plothover", function( e, pos, item ) {

        var isTooltip = $chart.is( ":ui-tooltip" );

        if ( item !== null && isTooltip === false ) {

            var label = item.series.label,
                data = item.datapoint[1],
                content = label + "<br/><hr>" + data,
                evtPos;

            evtPos = $.extend( ttPos, {
                of: {
                    pageX: item.pageX,
                    pageY: item.pageY,
                    preventDefault: $.noop
                }
            });

            $chart.attr( "title", content  )
                  .tooltip({position: evtPos,
                            content: content})
                  .tooltip( "open" );

        }
        else if ( item === null && isTooltip === true ) {

            $chart.tooltip( "destroy" );

        }

    });

});

默認情況下,jquery ui工具提示要求彈出它的元素具有title attribute (這就是jquery ui知道將事件綁定到哪些元素的方式)。 這段代碼的第一行:

$chart.attr( "title", content  )
      .tooltip({position: evtPos,
                content: content})
      .tooltip( "open" );

正在設置該屬性,這是您在屏幕截圖中看到的內容。

如果您將其更改為:

$chart.tooltip({position: evtPos,
                content: content,
                items: '*'})
      .tooltip( "open" );

這應該仍然允許工具提示彈出而沒有title文本。 在這里小提琴

說實話,我發現代碼示例非常鈍。 您可以在flot文檔中按照此示例更好地服務。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM