MSChart的研究(三)

 继续对MSChart学习:

本次主要针对MSChart的图形交互和AJAX的应用。

一. 图形交互：

概述：当点击饼图或legend中相应的模块，饼图会发生缺省：

代码如下：

protected void Page_Load(object sender, EventArgs e) { Series series= chart1.Series.Add("My series"); // Set series and legend tooltips series.ToolTip = "#VALX: #VAL{C} million"; series.LegendToolTip = "#PERCENT"; series.PostBackValue = "#INDEX"; series.LegendPostBackValue = "#INDEX"; // Populate series data double[] yValues = { 65.62, 75.54, 60.45, 34.73, 85.42, 32.12, 55.18, 67.15, 56.24, 23.65 }; string[] xValues = { "France", "Canada", "Germany", "USA", "Italy", "Russia", "China", "Japan", "Sweden", "Spain" }; series.Points.DataBindXY(xValues, yValues); // Set series visual attributes series.ChartType = SeriesChartType.Pie; series.ShadowOffset = 2; series.BorderColor = Color.DarkGray; // series.CustomAttributes = "LabelStyle=Outside"; chart1.Width = 600; chart1.Height = 400; } protected void chart1_Click(object sender, ImageMapEventArgs e) { int pointIndex = int.Parse(e.PostBackValue); Series series = chart1.Series["My series"]; if (pointIndex >= 0 && pointIndex < series.Points.Count) { series.Points[pointIndex].CustomProperties += "Exploded=true"; } }

效果图：

二. AJAX(一)——Click Event

概述：当单击图中相应的列柱，标题2就会相应的变化，若单击Chart中其他地方，会捕捉Chart中的相应对象的名称。

先在前台设置Chart，添加三个Series，分别对其设置Point，添加数据，如下： <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Chart ID="chart1" runat="server" onclick="chart1_Click"> <Legends> <asp:Legend Enabled="False" Name="Legend1"> </asp:Legend> </Legends> <Titles> <asp:Title Font="Microsoft Sans Serif, 12pt" Name="Title1" Text="单击Chart"> </asp:Title> <asp:Title DockingOffset="-2" Name="Title2" Text="上次单击元素：空"> </asp:Title> </Titles> <Series> <asp:Series CustomProperties="DrawingStyle=Emboss" Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" Legend="Legend1"> <Points> <asp:DataPoint YValues="6" /> <asp:DataPoint YValues="8" /> <asp:DataPoint YValues="7" /> <asp:DataPoint YValues="7" /> <asp:DataPoint YValues="4" /> </Points> </asp:Series> <asp:Series CustomProperties="DrawingStyle=Emboss" BorderColor="180, 26, 59, 105" Color="220, 252, 180, 65" Name="Series2" Legend="Legend1" > <Points> <asp:DataPoint YValues="6" /> <asp:DataPoint YValues="6" /> <asp:DataPoint YValues="7" /> <asp:DataPoint YValues="7" /> <asp:DataPoint YValues="8" /> </Points> </asp:Series> <asp:Series CustomProperties="DrawingStyle=Emboss" BorderColor="180, 26, 59, 10" Color="220, 224, 64, 10" Name="Series3" Legend="Legend1"> <Points> <asp:DataPoint YValues="6" /> <asp:DataPoint YValues="8" /> <asp:DataPoint YValues="3" /> <asp:DataPoint YValues="5" /> <asp:DataPoint YValues="6" /> </Points> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="Default" BorderColor="0, 0, 0, 0" BackSecondaryColor="0, 0, 0, 0" BackColor="0, 0, 0, 0" ShadowColor="0, 0, 0, 0" BackGradientStyle="TopBottom"> <AxisY LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style="Bold" mce_style="Bold""></LabelStyle> <MajorGrid LineColor="64, 64, 64, 64"></MajorGrid> </AxisY> <AxisX LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style="Bold" mce_style="Bold""></LabelStyle> <MajorGrid LineColor="64, 64, 64, 64"></MajorGrid> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart> </ContentTemplate> </asp:UpdatePanel> </div>

后台代码：

protected void Page_Load(object sender, EventArgs e) { //这个事件在这没必要 // chart1.Click+=new ImageMapEventHandler(chart1_Click); foreach (Series series in chart1.Series) { series.PostBackValue = "series:" + series.Name + ",#INDEX"; } // transfer of click coordinates. getCoordinates is a javascript function. this.chart1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this.chart1, "@").Replace("'@'", "'chart:'+_getCoord(event)"); // set position to relative in order to get proper coordinates. this.chart1.Style[HtmlTextWriterStyle.Position] = "relative"; this.ClientScript.RegisterClientScriptBlock( typeof(Chart), "Chart", @"function _getCoord(event){if(typeof(event.x)=='undefined'){return event.layerX+','+event.layerY;}return event.x+','+event.y;}", true); } protected void chart1_Click(object sender, ImageMapEventArgs e) { chart1.Titles[1].Text = "Nothing"; string[] input = e.PostBackValue.Split(':'); //若长度等于2 if (input.Length == 2) { string[] seriesData = input[1].Split(','); //若是series,则输出相应的列数据 if (input[0] == "series") { chart1.Titles[1].Text = "最后单击元素;" + seriesData[0] + " Data Point #" + seriesData[1]; } //否则输出Chart中相应的元素 else if (input[0] == "chart") { //确定是Chart中的哪个元素 HitTestResult hitTestResult=chart1.HitTest(Int32.Parse(seriesData[0]),Int32.Parse(seriesData[1])); chart1.Titles[1].Text = "最后单击元素;" + hitTestResult.ChartElementType.ToString(); } } }

效果图：

三. AJAX(二)——Chart as Trriger

概述：当单击图标上的列柱时，Gridview相应的发生变化。主要靠AJAX的UpdatePanel控件的Trriger属性实现异步回调。

前台主要代码：

<asp:AccessDataSource ID="MarterSource" runat="server" DataFile="~/App_Data/chartdata.mdb" SelectCommand="SELECT REGIONS.RegionName, SUM(REPS_SALES.Sales) AS SumOfSales FROM (REPS_SALES INNER JOIN REGIONS ON REPS_SALES.RegionID = REGIONS.RegionID) GROUP BY REGIONS.RegionName"> </asp:AccessDataSource> <asp:Chart ID="Chart1" runat="server" DataSourceID="MarterSource" onclick="Chart1_Click"> <Series> <asp:Series Name="Series1" XValueMember="RegionName" YValueMembers="SumOfSales"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>

后台代码：

 protected void Page_Load(object sender, EventArgs e) { this.Chart1.Series[0].PostBackValue = "#AXISLABEL"; this.Chart1.Series[0].ToolTip = "#AXISLABEL Region: #VAL{C}"; } protected void Chart1_Click(object sender, ImageMapEventArgs e) { DetailsSource.SelectParameters["RegionName"].DefaultValue = e.PostBackValue; GridView1.Caption = string.Format("{0} Region", e.PostBackValue); }

效果图：

四. AJAX(三)——AJAX更新

概述：当点击图列时，自动弹出一框框，显示当前图列柱的值，当修改txtBox中的值点确定后，图列表相应的发生变化，框框消失。

具体前台代码:(panel必须放在UpdatePanel中，不然txtBox中值不会出现)

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel runat="server"> <asp:Chart ID="Chart1" runat="server" BackColor="243, 223, 193" BackGradientStyle="TopBottom" BorderlineColor="181, 64, 1" BorderlineDashStyle="Solid" onclick="Chart1_Click"> <BorderSkin SkinStyle="Emboss"></BorderSkin> <Series> <asp:Series Name="Series1" BorderColor="192, 192, 255" ChartType="Bar" CustomProperties="DrawingStyle=Cylinder" XValueType="Double" YValueType="Double"> <Points> <asp:DataPoint XValue="1" YValues="56" /> <asp:DataPoint XValue="2" YValues="23" /> <asp:DataPoint XValue="3" YValues="45" /> <asp:DataPoint XValue="4" YValues="67" /> <asp:DataPoint XValue="5" YValues="34" /> </Points> </asp:Series> <asp:Series ChartArea="ChartArea1" ChartType="Bar" CustomProperties="DrawingStyle=Cylinder" Name="Series2" XValueType="Double" YValueType="Double"> <Points> <asp:DataPoint XValue="1" YValues="87" /> <asp:DataPoint XValue="2" YValues="54" /> <asp:DataPoint XValue="3" YValues="32" /> <asp:DataPoint XValue="4" YValues="68" /> <asp:DataPoint XValue="5" YValues="21" /> </Points> </asp:Series> </Series> <Titles> <asp:Title Name="title1" Text="单击和更新"></asp:Title> </Titles> <ChartAreas> <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BorderDashStyle="Solid"> <AxisX LineColor="64, 64, 64, 64"> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:Panel ID="InputPanel" runat="server" Visible="False" style=" position:absolute;top: 40px; left:100px; border:black 1px ridge; padding:3px; background-color:White;"> <asp:HiddenField ID="hidderField" runat="server" /> <asp:TextBox ID="txtValue" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" Width="85px" /> </asp:Panel> </asp:Panel> </ContentTemplate> </asp:UpdatePanel>

后台代码：

protected void Page_Load(object sender, EventArgs e) { //对每个Series赋值 foreach (Series series in Chart1.Series) { series.PostBackValue = "#SERIESNAME;#INDEX"; } } protected void Chart1_Click(object sender, ImageMapEventArgs e) { string[] pointDate = e.PostBackValue.Split(';'); //转化为相应的Series Series series = Chart1.Series[pointDate[0]]; //转化为相应的DataPoint DataPoint dataPoint = series.Points[Int32.Parse(pointDate[1])]; //给txtBox和Hidderfield赋值 hidderField.Value = e.PostBackValue; txtValue.Text = dataPoint.YValues[0].ToString(); //显示Panel InputPanel.Visible = true; // PointValue.Focus(); } protected void Button1_Click(object sender, EventArgs e) { string[] pointData = hidderField.Value.Split(';'); //转化为相应的Series Series series = Chart1.Series[pointData[0]]; //转化为相应的DataPoint DataPoint dataPoint = series.Points[Int32.Parse(pointData[1])]; //给txtBox和Hidderfield赋值 dataPoint.YValues[0] = Double.Parse(txtValue.Text); //隐藏Panel InputPanel.Visible = false; }

效果图：

 五. AJAX(四)——Real Time Chart

概述：每过一秒钟，Chart就增加五个点，动态的生成一条曲线。

代码：(前台代码一定要设EnableViewState="true"，否则一直就是五个点)

protected void Timer1_Tick(object sender, EventArgs e) { Random random = new Random(); foreach (Series series in Chart1.Series) { double xLastValue = series.Points[series.Points.Count - 1].XValue+1; double yLastValue = series.Points[series.Points.Count - 1].YValues[0]; for (int i = 0; i < 5; i++) { yLastValue += random.Next(-3, 4); if (yLastValue >= 100.0) { yLastValue -= 25.0; } if (yLastValue <= 10.0) { yLastValue += 25.0; } series.Points.AddXY(xLastValue++,yLastValue); } } while (Chart1.Series[0].Points.Count > 100) { foreach (Series series in Chart1.Series) { series.Points.RemoveAt(0); } } double axisMinimum = this.Chart1.Series[0].Points[0].XValue; this.Chart1.ChartAreas[0].AxisX.Minimum = axisMinimum; this.Chart1.ChartAreas[0].AxisX.Maximum = axisMinimum + 100; }

效果图：