Question

我有一个图表，其中y轴是整数（秒）的货币。我试图显示一个'自定义'工具提示（HH：MM：SS）我将秒转换为这种格式，但我不知道如何在asp.net页面上的MSChart上的ToolTip上显示它？

Answer 1

我不喜欢使用asp.net图表控件的ToolTip属性，因为它们在某些版本的Internet Explorer中不起作用。这是实现您想要做的事情的好方法。首先，创建两个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中。您可以使用类似的技术在图表的其他部分触发工具提示。

如何使用c＃自定义图表数据上的工具提示

1 个答案: