2013-10-16 44 views
0

我已經寫了一個自定義的工具提示,以鞋的asp.net圖表工具提示值,但由於某些原因#VALX(x軸值)是日期時間正在向java腳本函數發送錯誤。asp.net圖表控件顯示不正確的工具提示日期時間值

這裏是我的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尖端象下面

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

所示的值是正確的。我的意思是工具提示中的x值顯示正確。

任何想法我在做什麼錯在這裏?

回答

3

請嘗試以下操作。

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

我試過了,我甚至試過#VALX {dd/mm/yyyy}。但它的功效。 – AMS

+0

您已經設置了ChartValueType.DateTime,因此它應該可以工作。但請嘗試使用XValueType = ChartValueType.String並讓我知道結果。請參閱http://blogs.visoftinc.com/2008/12/15/asp-net-3-5-charting-control-formatting-tooltips-as-date/ – mit

+0

no mit,它也不起作用。 – AMS

相關問題