c# Chart 服务器端动态创建ChartArea

Posted 2020-06-18 AdolphYang

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

View Code

 

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。