c# - asp.net 图表控件显示不正确的工具提示日期时间值

标签 c# javascript asp.net charts

我已经编写了一个自定义的工具提示来显示 asp.net 图表工具提示值,但由于某种原因,日期时间的 #VALX(x 轴值) 被错误地发送到 java 脚本函数。

这是我的 aspx 代码

<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function showTooltip(value1, value2, ex) {
            var tooltip = document.getElementById("myToolTip");
            tooltip.style.visibility = "visible";
            var posx = 0;
            var posy = 0;
            if (!e) var e = (window.event) ? event : ex;
            if (e.pageX || e.pageY) {
                posx = e.pageX;
                posy = e.pageY;
                tooltip.style.left = posx + "px";
                tooltip.style.top = (posy - 100) + "px";
            }
            else if (e.clientX || e.clientY) {
                if (e.cancelBubble != null) e.cancelBubble = true;
                //for IE8 and earlier versions event bubbling occurs...
                posx = e.clientX + document.body.scrollLeft
                       + document.documentElement.scrollLeft;
                posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                tooltip.style.left = posx + "px";
                tooltip.style.top = (posy - 100) + "px";
            }
           // document.getElementById("<%=lbl.ClientID%>").innerHTML =
          //"X and Y Values : " + "(" + value1 + "," + value2 + ")";
            document.getElementById("<%=lbl.ClientID%>").innerHTML = "day : " + value1 + " <br> impressions: " + value2 + "";
        }


    function hide() {
        var tooltip = document.getElementById("myToolTip");
        tooltip.style.visibility = "hidden";
    }
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="MyDropDown" runat="server" AutoPostBack="true" OnSelectedIndexChanged="MyDropDown_SelectedIndexChanged"></asp:DropDownList>
    <asp:Chart runat="server" ID="MyChart" EnableViewState="true">
                        <ChartAreas>
                            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                        </ChartAreas>
                    </asp:Chart>
    </div>
        <div id="myToolTip" style="position: absolute; visibility: hidden; width:200px; height:100px; margin: 18px 0;
            padding: 18px 20px;
            background-color: white; /* easy rounded corners for modern browsers */
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #c5d9e8;
            padding: 17px 19px;">
<div style="position:absolute;">
 <b><asp:Label ID="lbl" runat="server" Font-Size="XX-Small"></asp:Label></b>
</div>
</div>
    </form>
</body>
</html>

这是我的代码

    //Add the series to the chart
    MyChart.Series.Add(new Series(Seriesname));
    //Define the chart type
    MyChart.Series[Seriesname].ChartType = SeriesChartType.Line;
    //MyChart.Titles.Add("Trends shown for time interval of " + SelectedDate);

    //Plot the points on the graph
    MyChart.Series[Seriesname].XValueType = ChartValueType.DateTime;
    for (int i = 0; i < table.Rows.Count; i++)
    {
        MyChart.Series[Seriesname].Points.AddXY(Convert.ToDateTime(table.Rows[i].ItemArray[0]), Convert.ToInt32(table.Rows[i].ItemArray[1]));
    }

    //adding legends a nd legend style to the chart
    MyChart.Legends.Add(new Legend(Seriesname));
    MyChart.Legends[Seriesname].LegendStyle = LegendStyle.Table;
    MyChart.Legends[Seriesname].TableStyle = LegendTableStyle.Wide;
    MyChart.Legends[Seriesname].Docking = Docking.Bottom;
    MyChart.Legends[Seriesname].IsDockedInsideChartArea = false;

    //Enable view state so that chart is rendered correctly even on the postback
    MyChart.ViewStateContent = SerializationContents.Default;
    MyChart.EnableViewState = true;

    //Adding series attributes to teh charts
    MyChart.Series[Seriesname].BorderWidth = 2;
    MyChart.Legends[Seriesname].Font = new System.Drawing.Font("Arial", 10);
    //MyChart.Series[Seriesname].ToolTip = "Q:#SERIESNAME\nDay:#VALX\nImpressions:#VALY";
    for (int i = 0; i < MyChart.Series[Seriesname].Points.Count; i++)
    {
        MyChart.Series[Seriesname].Points[i].MapAreaAttributes = "onmouseover=\"showTooltip(#VALX,#VALY,event);\"";
    }
    //MyChart.Series[Seriesname].Points[1].MapAreaAttributes = "onmouseover=\"showTooltip(#VALX,#VALY,event);\"";
    MyChart.Attributes.Add("onmouseover", "return hide()");
    MyChart.Width = 1500;
    MyChart.Height = 450;

工具提示工作正常,但 X 值的类型为 DateTime,而不是显示日期,而是显示一些十进制值 (0.0006786458868)。

当我直接使用 Tootl Tip 时,如下所示

MyChart.Series[Seriesname].ToolTip = "Q:#SERIESNAME\nDay:#VALX\nImpressions:#VALY";

显示的值是正确的。我的意思是工具提示中的 x 值显示正确。

知道我在这里做错了什么吗?

最佳答案

请尝试以下操作。

MyChart.Series[Seriesname].Points[i].MapAreaAttributes = "onmouseover=\"showTooltip('#VALX',#VALY,event);\"";

关于c# - asp.net 图表控件显示不正确的工具提示日期时间值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19395604/

相关文章:

javascript - 带有复选框的排序列。不起作用。我卡住了

javascript - Angular 错误日志发送到elasticsearch

.net - 如何保护我的 ASP.NET AJAX 应用程序?

javascript - 无法让 jQuery 和 Web 服务很好地发挥作用

c# - 在这种情况下我需要使用 BaseClass 吗?

c# - 如何在 C# 中格式化数字,使 12523 变为 "12K", 2323542 变为 "2M"等?

javascript - 如何在本地存储数据?

asp.net - 图像质量损失

c# - REST api 不调用导航

c# - ServiceStack JSONSerializer 和 HashSet<x>