简体   繁体   English

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

[英]asp.net chart control showing incorrect tool tip date time value

i have written a customized tool tip to shoe the asp.net chart tool tip values, but for some reason the #VALX(x-axis values) which is of date time is being sent wrong to the java script function. 我编写了一个自定义的工具提示来调试asp.net图表工具提示值,但是由于某种原因,日期时间为#VALX(x轴值)的错误发送给了Java脚本函数。

here is my aspx code 这是我的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>

and this my code behind 这是我后面的代码

    //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;

the tool tip works fine but the X values which is of type DateTime, instead of showing date it is showing some decimal value(0.0006786458868). 工具提示可以正常工作,但是DateTime类型的X值而不是显示日期,而是显示一些十进制值(0.0006786458868)。

when i use the tootl tip directly like below 当我像下面直接使用toothl技巧时

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

the values shown are correct. 显示的值是正确的。 i mean the x value in the tool tip shows correct. 我的意思是工具提示中的x值显示正确。

any ideas what i am doing wrong here? 任何想法我在这里做错了吗?

请尝试以下。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM