Question

我正在寻找自定义asp.net图表的工具提示外观。有没有人建议从哪里开始寻找？

Answer 1

工具提示本身可能是通过基本HTML实现的。如果您想要更复杂的工具提示，请查看jQuery工具提示插件。

Answer 2

有一种更好的方法可以做到这一点。首先，创建两个javascript函数（我们称之为f1和f2）。这两个函数将用于响应鼠标事件。在此示例中，f1函数接收事件以及要在工具提示弹出窗口中显示的字符串。 f2函数隐藏了工具提示弹出窗口。

function f1(e, str) {
    tooltip = document.getElementById("toolTip");
    tooltip.innerHTML = str;
    if (!e) var e = window.event;
    var posx = 0;
    var posy = 0;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    posy = Math.round(posy);
    posx = Math.round(posx);
    tooltip.style.top = posy + 'px';
    tooltip.style.left = posx + 'px';
}
function f2() {
    document.getElementById("toolTip").innerHTML = "";
}

现在，对于工具提示弹出窗口，我们在.aspx页面中创建一个div。使其定位绝对，以便我们可以将它放在页面的任何位置。您可以将所需的所有自定义添加到div中，但在这种情况下，我们只会显示一些文本：

<div style="position:absolute; background-color:White; color:Black; id="toolTip"></div>

现在，在您的代码隐藏中，您可以将asp.net图表的元素与将触发f1和f2 javascript函数的事件相关联。例如，当鼠标悬停在数据点上时，我们可以显示工具提示弹出窗口，并在它离开数据点时隐藏它。

int count = graph.Series["Default"].Points.Count;
for (int i = 0; i < count; i++)
{
    string toolTipText = "My Text";
    graph.Series["Default"].Points[i].MapAreaAttributes =   "onmouseover=\"f1(event, '" + toolTipText + "')\" onmouseout=\"f2()\"";
}

如果需要在显示工具提示弹出窗口之前出现延迟，则可以将延迟添加到javascript中。

有谁知道如何自定义asp.net图表的工具提示外观？

2 个答案: