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

时间:2015-07-06 08:07:27

标签: c# asp.net crystal-reports

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

1 个答案:

答案 0 :(得分:0)

我不喜欢使用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中。您可以使用类似的技术在图表的其他部分触发工具提示。