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

本文关键字：工具提示 日期 时间 不正确 显示 net 控件 asp | 更新日期: 2023-09-27 18:35:28

我已经编写了一个自定义的工具提示来填充 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）。

当我直接使用嘟嘟耳头时，如下所示

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

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

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

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

请尝试

以下操作。

MyChart.Series[Seriesname].Points[i].MapAreaAttributes = "onmouseover='"showTooltip('#VALX',#VALY,event);'"";
相关文章：