0

KendoUI の dataViz ライブラリを使用すると、折れ線グラフ内に表示されるツールチップに子 p タグを持つ div が含まれます。この p タグのコンテンツは動的です。p タグが空の場合、データ ポイントにカーソルを合わせると、段落タグ内のコンテンツの長さをチェックする関数を実行し、空の場合は div を含む全体を非表示にします。マウスがデータポイント上にある間、divが一瞬だけ非表示になり、その後再び表示されるという問題があります。ここに例があります

編集: 以下は、OnaBai のメソッドを使用してツールチップを実装する方法です。ただし、まだ正しく機能していません。if 条件は、最初のブロックを実行する必要があります。これは、p タグに文字が含まれていない場合です。

 tooltip: {
    visible: true,
    border: {
        width: 1
    },
    font: "10px MS Trebuchet, Arial, sans-serif",
    template: function (a) {
        if (!$(".tooltip-alert p").text().trim().length) {
            return mTypeName + "&nbsp;" + a.value + unitName + " <br/>" +
                   a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                   "<div class='tooltip-alert'>" +
                   "<p></p>" +
                   "</div>";
        } else {
            return mTypeName + "&nbsp;" + a.value + unitName + " <br/>" +
                   a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                "<div class='tooltip-alert'>" +
                    "<div class='statType-icon alertIcon-" + a.dataItem.alertid + "'></div>" +
                    "<p>" + a.dataItem.alertname + "</p>" +
                "</div>";
        }
    }
},
4

1 に答える 1