0

フロート チャートのツール ヒントを表示しようとしています。バーの上にカーソルを置くと、ツール ヒントに対応する値が表示されます。私のグラフは画面全体の幅を占めています。左端にあるときは、トゥーチップが画面を超えており、値が表示されません。左端または右端にある場合の再配置方法。item.pageX と item.pageY の値を渡しています。私は混乱しています

#flot-tooltip {
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        position: absolute;
        display: none;
        border: 2px solid;
        padding: 2px;
        background-color: #FFF;
        opacity: 0.8;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }

function showTooltip(x, y, contents, z) {
        $('<div id="flot-tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30, 
            left: x - 110,
            'border-color': z,
        }).appendTo("body").show();
    }

$("#flot-chart").bind("plothover", function(event, pos, item) {
        if(item) {
            if(previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $('#flot-tooltip').remove();
                var x = item.datapoint[0].toFixed(2);
                    y = item.datapoint[1].toFixed(2);
                    z = item.series.color;

                showTooltip(item.pageX, item.pageY, "<b>" + item.series.label + "</b><br /> <hr>" + y, z);

            }
        } else {
            $('#flot-tooltip').remove();
            previousPoint = null;
        }
    });
4

1 に答える 1

0

関数内にロジックを追加する必要がある場合がありますshowTooltip。たとえばx、画面の左端に近すぎるときに制限したいとします。次の効果に何かを追加できます。

function showTooltip(x, y, contents, z) {
    if(x < 100){
     x = 100;
    }
  //rest of function
}

これにより、値が事前定義された値よりも小さい場所xにツールチップが表示されるようになります(ここの例です)。 100x100

于 2013-01-10T22:11:31.013 に答える