1 aspx
<x:ContentPanel ShowBorder="true" ShowHeader="false" ID="ContentPanel1" runat="server" > <asp:Chart ID="ChartData" runat="server" Width="1600px" Height="600px" > </asp:Chart> </x:ContentPanel>
2 aspx.cs
private void LoadSeriesBySearch() { List<Model.Devices> list = new List<Model.Devices>(); if (ddlDevice.SelectedItem != null) { string[] devIds = ddlDevice.SelectedValueArray; list = new BLL.Devices().GetModelList(string.Format(" ID IN ({0}) ", string.Join(",", devIds))); } else { list = GetDevicesByUserID(CurrentUser.ID); } ChartData.Series.Clear(); ChartData.ChartAreas.Clear(); ChartData.Titles.Add("设备数据统计"); ChartArea area = new ChartArea(); #region 初始化area area.BackGradientStyle = GradientStyle.DiagonalLeft; area.AxisX.Title = "时间"; area.AxisY.Title = "压力值"; area.AxisX.MajorGrid.LineWidth = 1; area.AxisY.MajorGrid.LineWidth = 1; area.AxisX.LabelStyle.Font = new Font(FontFamily.GenericSansSerif, 8); area.AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dash; area.AxisY.MajorGrid.LineColor = Color.LightSlateGray; area.AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash; ChartData.ChartAreas.Add(area); #endregion Color[] cols = { Color.Black, Color.Blue, Color.Brown, Color.Coral, Color.Cyan, Color.Gold, Color.Gray, Color.Green, Color.Lime, Color.Navy }; int i = 0; foreach (Model.Devices dev in list) { //创建序列 Series ser = new Series(dev.Name, 1); #region 初始化Series ser.Name = dev.Name; ser.ChartArea = area.Name; ser.ChartType = SeriesChartType.Line; ser.XValueMember = "RecordDate"; ser.YValueMembers = "Pressure"; ser.MarkerBorderColor = Color.BlueViolet; ser.MarkerBorderWidth = 3; ser.MarkerColor = Color.Red; ser.MarkerSize = 5; ser.MarkerStyle = MarkerStyle.Diamond; ser.LabelForeColor = Color.Black; #region 设置序列的颜色 if (i == 10) { i = 0; } ser.Color = cols[i]; i++; #endregion ser.ShadowColor = Color.Yellow; ser.ToolTip = "Pressure:#VAL\r\nTime:#VALX"; ser.SmartLabelStyle.Enabled = false; ser.BorderWidth = 3; ser.ShadowOffset=2; ser.IsVisibleInLegend = true; ser.IsValueShownAsLabel = true; ser.IsXValueIndexed = false; //ser.Legend = dev.Name; Legend leg = new Legend(); leg.Name = dev.Name; leg.BackColor = Color.Transparent; leg.Docking = Docking.Right; leg.Font = new Font(FontFamily.GenericSansSerif, 20); leg.Alignment = StringAlignment.Near; //leg.Position = new ElementPosition(-100,0,20,20); ChartData.Legends.Add(leg); #endregion //创建点 List<Model.DeviceDatas> dds = new List<Model.DeviceDatas>(); if ((dpStartDate.SelectedDate != null) && (dpEndDate.SelectedDate != null)) { dds = new BLL.DeviceDatas().GetModelList(string.Format(" DEVICEID={0} AND RECORDDATE BETWEEN '{1}' AND '{2}' ", dev.ID, dpStartDate.SelectedDate, dpEndDate.SelectedDate)); } else { dds = new BLL.DeviceDatas().GetModelList(string.Format(" DEVICEID={0} ", dev.ID)); } foreach (Model.DeviceDatas dd in dds) { ser.Points.AddXY(dd.RecordDate, dd.Pressure); } ChartData.Series.Add(ser); } } //获得当前用户的设备集合 private List<Model.Devices> GetDevicesByUserID(int p) { List<Model.Devices> list = new List<Model.Devices>(); if (CurrentUser.IsSysUser == true) { list = new BLL.Devices().GetListTop("", 8); } else { //如果存在客户、不存在项目,查询该客户下的所有设备数据 if (CheckForeignIDIsExist(CurrentUser.CustomerID) && !CheckForeignIDIsExist(CurrentUser.ProjectID)) { list = new BLL.Devices().GetDevicesListByCustomerID((int)CurrentUser.CustomerID, "", "", 1, 8); } //如果存在客户、存在项目、不存在站点,查询该项目下的设备数据 else if (CheckForeignIDIsExist(CurrentUser.CustomerID) && CheckForeignIDIsExist(CurrentUser.ProjectID) && !CheckForeignIDIsExist(CurrentUser.SiteID)) { list = new BLL.Devices().GetDevicesListByProjectID((int)CurrentUser.CustomerID, "", "", 1, 8); } //如果存在客户、项目、站点,查询该站点下的设备数据 else if (CheckForeignIDIsExist(CurrentUser.CustomerID) && CheckForeignIDIsExist(CurrentUser.ProjectID) && CheckForeignIDIsExist(CurrentUser.SiteID)) { list = new BLL.Devices().GetListTop(string.Format(" SiteID={0} ", CurrentUser.SiteID),8); } } return list; }
3 error:
FineUI的控件
<x:Button runat="server" ID="btnSearch" Text="搜索" Icon="SystemSearch" OnClick="btnSearch_Click" />
可以进入服务器执行,但是server执行之后,并没有异步更新到client。
在FineUI中需要设置其异步区域:
AjaxAspnetControls="ChartData"
<x:PageManager ID="PageManager1" AutoSizePanelID="Panel1" AjaxAspnetControls="ChartData" runat="server" />
4 更进一步,应该写jquery进行异步更新,在server中借助第三方chart库动态创建一个曲线图(或者自己画一个Bitmap曲线图),然后返回给client的某个区域div。