我已经编写了一个定制的工具提示来鞋 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 值显示正确。
有什么想法我在这里做错了吗?