首先将dev的chartControl拖到窗体中并设置父窗体停靠,然后手动添加一个seriies,如下图
初始化chartxiao
using DevExpress.XtraEditors;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using DevExpress.XtraCharts;
using System.Threading;namespace jikong
{public partial class dynamiCurve : DevExpress.XtraEditors.XtraForm{readonly Random random = new Random();public dynamiCurve(){InitializeComponent();//Control.CheckForIllegalCrossThreadCalls = false;//testChart();secondTest();//Init();}private void checkedListBoxControl1_ItemCheck(object sender, DevExpress.XtraEditors.Controls.ItemCheckEventArgs e){MessageBox.Show( checkedListBoxControl1.SelectedItem.ToString());}#region 动态曲线private void secondTest() {chartControl1.Titles.Add(new ChartTitle());chartControl1.Titles[0].Text ="秒测试";//传入实际曲线名称#region 调整图例LineSeriesView lineSeriesView = new LineSeriesView();chartControl1.SeriesTemplate.View = lineSeriesView;//Legend的位置chartControl1.Legend.AlignmentHorizontal = DevExpress.XtraCharts.LegendAlignmentHorizontal.Left;chartControl1.Legend.AlignmentVertical = DevExpress.XtraCharts.LegendAlignmentVertical.TopOutside;chartControl1.Legend.Direction = DevExpress.XtraCharts.LegendDirection.RightToLeft;//x轴为时间轴diagram = (XYDiagram)chartControl1.Diagram;diagram.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Millisecond;diagram.AxisX.DateTimeScaleOptions.ScaleMode = ScaleMode.Continuous;#endregionchartControl1.Series.Clear();seriesDynamic = new Series("变化曲线", ViewType.Spline);seriesDynamic.ArgumentScaleType = ScaleType.Auto;seriesDynamic.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//chartControl1.Series.Add(seriesDynamic);chartControl1.SeriesSerializable = new Series[] { seriesDynamic };diagram.AxisX.GridLines.MinorVisible = true;diagram.AxisX.GridLines.Visible = true;diagram.AxisX.Label.TextPattern = "{A:HH:mm:ss}";diagram.AxisX.Title.Font = new System.Drawing.Font("Tahoma", 9F);diagram.AxisX.Title.Text = @"时间(分)";diagram.AxisX.Title.Visibility = 0;diagram.AxisX.VisibleInPanesSerializable = "-1";//???diagram.AxisX.WholeRange.Auto = true;diagram.AxisX.WholeRange.SideMarginsValue = 1;diagram.AxisX.Interlaced = false;//X轴交叉允许diagram.AxisY.WholeRange.AlwaysShowZeroLevel = false;//始终显示0水平线diagram.AxisY.Title.Font = new System.Drawing.Font("Tahoma", 9F);diagram.AxisY.Title.Text = @"随机数";diagram.AxisY.Title.Visibility = 0;diagram.AxisY.VisibleInPanesSerializable = "-1";//????}Series seriesDynamic;XYDiagram diagram;private void lineLoop() {while (true) {try{Thread.Sleep(900);DateTime argument = DateTime.Now;//x轴if (seriesDynamic.View is LineSeriesView){this.BeginInvoke(new Action(() => { seriesDynamic.Points.Add(new SeriesPoint(argument, Math.Round(random.NextDouble() * 100.0))); }));Console.WriteLine("添加点"+argument);}Thread.Sleep(50);DateTime minDate = argument.AddSeconds(-20);//x轴时间曲度,可视点数=(50+3)/时间间隔#region removePint pointsToRemoveCount = 0;if (seriesDynamic.Points.Count>22) {this.BeginInvoke(new Action(() => { seriesDynamic.Points.RemoveAt(0); }));//来不及移除的Console.WriteLine("移除点0到" + "剩余点数" + seriesDynamic.Points.Count);}//for (int i = 0; i < seriesDynamic.Points.Count; i++) {// if (seriesDynamic.Points[i].DateTimeArgument < minDate)// { // pointsToRemoveCount++;// }//}//if (pointsToRemoveCount < seriesDynamic.Points.Count)//{// pointsToRemoveCount--;//}//if (pointsToRemoveCount > 0)//{// this.BeginInvoke(new Action(() => { seriesDynamic.Points.RemoveRange(0, pointsToRemoveCount); }));// Console.WriteLine("移除点0到"+pointsToRemoveCount+"剩余点数"+seriesDynamic.Points.Count);//}#endregion#region SETX this.BeginInvoke(new Action(() => {if (diagram != null && (diagram.AxisX.DateTimeScaleOptions.MeasureUnit == DateTimeMeasureUnit.Millisecond || diagram.AxisX.DateTimeScaleOptions.ScaleMode == ScaleMode.Continuous)){diagram.AxisX.WholeRange.SetMinMaxValues(minDate, argument);}}));#endregion}catch (Exception ex){MessageBox.Show(ex.ToString());Console.Write(ex);}}}#endregion#region 静态曲线private void testChart() {chartControl1.Titles.Add(new ChartTitle());chartControl1.Titles[0].Text = "A Point Chart";#region 调整图例chartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.RightOutside; //获取或设置图表控件中的图例的水平对齐方式。chartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Top;//获取或设置图表控件中的图例的竖直对齐方式。chartControl1.Legend.Direction = LegendDirection.BottomToTop;//获取或设置在该图例中显示系列名称的方向。chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.True;//是否在图表上显示图例#endregionSeries series1 = CreateSeries("Series 1");//创建系列Series series2 = CreateSeries("Series 2");chartControl1.Series.Add(series1);// Add the series to the chart.将点系列加入图表控件chartControl1.Series.AddRange(new Series[] { series2 });//Diagram 对象等于 null (在 Visual Basic 中为 Nothing),直到图表至少拥有一个系列。SetDiagarm(chartControl1);//设置图像//CreateAxisY(series2, chartControl1);// Add points to it.series1.Points.Add(new SeriesPoint(1, 10));series1.Points.Add(new SeriesPoint(2, 22));series1.Points.Add(new SeriesPoint(3, 14));series1.Points.Add(new SeriesPoint(4, 27));series1.Points.Add(new SeriesPoint(5, 15));series1.Points.Add(new SeriesPoint(6, 28));series1.Points.Add(new SeriesPoint(7, 15));SeriesPoint spoint = new SeriesPoint(8, 33);spoint.Color = Color.Red;//定制点的颜色series1.Points.Add(spoint);//系列2采用DataTable绑定// Create an empty table.DataTable table = new DataTable("Table1");// Add two columns to the table.table.Columns.Add("Argument", typeof(Int32));table.Columns.Add("Value", typeof(Int32));// Add data rows to the table.Random rnd = new Random();DataRow row = null;for (int i = 0; i < 10; i++){row = table.NewRow();row["Argument"] = i;row["Value"] = rnd.Next(30);table.Rows.Add(row);}// Specify data members to bind the series.series2.ArgumentScaleType = ScaleType.Numerical;series2.ArgumentDataMember = "Argument";//设置参数数据字段的名称series2.ValueScaleType = ScaleType.Numerical;series2.ValueDataMembers.AddRange(new string[] { "Value" });series2.DataSource = table;}/// <summary>/// 创建系列/// </summary>/// <param name="Caption">图形标题</param>/// <returns></returns>private Series CreateSeries(string Caption){// Create a point series.创建一个点系列Series series1 = new Series(Caption, ViewType.Line);series1.CrosshairEnabled = DevExpress.Utils.DefaultBoolean.True; //获取或设置一个值,该值指定此系列是否启用十字准线游标。series1.CrosshairLabelVisibility = DevExpress.Utils.DefaultBoolean.True;//指定是否在特定的2D DEVExt.xCARTARTSs系列的图表上显示十字准线标签。series1.CrosshairLabelPattern = "坐标:({A},{V})";//获取或设置一个字符串表示指定要在当前系列的瞄准线标签中显示的文本的模式series1.CrosshairHighlightPoints = DevExpress.Utils.DefaultBoolean.Default;//获取或设置一个值,该值指定当十字准线光标悬停时,系列点是否突出显示。// Set the numerical argument scale type for the series,as it is qualitative, by default.series1.ArgumentScaleType = ScaleType.Numerical; //指定系列的参数刻度类型。默认为(ScaleType.Auto)X轴series1.ValueScaleType = ScaleType.Numerical; //指定系列的取值刻度类型 Y轴series1.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True; //是否显示系列点标签series1.LegendText = Caption;//设置标志系列的图例文本//调整 系列点标签PointSeriesLabel myLable1 = (PointSeriesLabel)series1.Label;myLable1.Angle = 0;//获取或设置控制数据点标签位置的角度myLable1.TextPattern = "{S}({A},{V})";//获取或设置一个字符串,该字符串表示指定要在系列标注标签中显示的文本的模式。myLable1.Position = PointLabelPosition.Outside;//获取或设置点标记所在的位置。myLable1.ResolveOverlappingMode = ResolveOverlappingMode.Default;//启用系列标签的自动冲突检测和解决// 点系列视图属性设置PointSeriesView myView1 = (PointSeriesView)series1.View;//转换系列的视图类型为点类型myView1.PointMarkerOptions.Kind = MarkerKind.Star;//标记的形状myView1.PointMarkerOptions.StarPointCount = 5;//设置星形标记具有的点数myView1.PointMarkerOptions.Size = 8;//标记大小//在不同的窗格中显示系列//myView1.Pane—— 在 属性 窗口中展开 XYDiagramSeriesViewBase.Pane 属性的下拉菜单,并单击 New pane(新建窗格) 菜单项。return series1;}/// <summary>/// 创建图表的第二坐标系/// </summary>/// <param name="series">Series对象</param>/// <returns></returns>private SecondaryAxisY CreateAxisY(Series series, ChartControl chartControl){// Create secondary axes, and add them to the chart's Diagram.SecondaryAxisY myAxis = new SecondaryAxisY(series.Name);((XYDiagram)chartControl.Diagram).SecondaryAxesY.Add(myAxis);// Assign the series2 to the created axes.((PointSeriesView)series.View).AxisY = myAxis;//为当前系列指定Y轴myAxis.Title.Text = "A Secondary Y-Axis";myAxis.Title.Alignment = StringAlignment.Far; //顶部对齐myAxis.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;myAxis.Title.Font = new Font("宋体", 9.0f);series.View.Color = Color.Green;Color color = series.View.Color;//设置坐标的颜色和图表线条颜色一致myAxis.Title.TextColor = color;myAxis.Label.TextColor = color;myAxis.Color = color;return myAxis;}/// <summary>/// 图像设置/// </summary>/// <param name="pointChart">图表控件</param>private void SetDiagarm(ChartControl pointChart){// Access the diagram's properties.把 Diagram 对象转换为所需的图象类型XYDiagram diagram = (XYDiagram)pointChart.Diagram;diagram.Rotated = false;//图像是否旋转diagram.EnableAxisXScrolling = true;//X轴是否允许滚动diagram.EnableAxisXZooming = true;//X轴是否允许缩放diagram.PaneLayout.Direction = PaneLayoutDirection.Vertical;//窗格的对齐方式// Customize the appearance of the X-axis title.调整 X-轴AxisX xAxis = diagram.AxisX;//获取X轴xAxis.Alignment = AxisAlignment.Near;//指定轴相对于另一主轴的位置。属性 AxisAlignment.Zero 设置仅对主轴可用xAxis.Title.Text = "X轴";//设置轴标题xAxis.Title.Visibility = DevExpress.Utils.DefaultBoolean.True; //是否显示轴标题xAxis.Label.TextPattern = "";//防止过长的轴标签产生重叠xAxis.Label.Angle = 0;//设置轴标签文本旋转的角度xAxis.Label.EnableAntialiasing = DevExpress.Utils.DefaultBoolean.Default;//获取或设置是否对轴标签的文本应用反走样(平滑)xAxis.Label.Staggered = false;//轴标签是否是交错排列的//轴取值的范围是自动确定的(当启用了 xAxis.WholeRange.Auto 属性时),也可以人工指定两个轴取值来限定轴的范围//xAxis.WholeRange.Auto = false;//xAxis.WholeRange.MaxValue = 70;//xAxis.WholeRange.MinValue = -70;//通过 AxisBase.Logarithmic 和 AxisBase.LogarithmicBase 属性,以对数来呈现轴的取值。//xAxis.Logarithmic = true;//xAxis.LogarithmicBase = 10;// Create a constant line. 设置常数线//ConstantLine constantLine1 = new ConstantLine("Constant Line 1");//xAxis.ConstantLines.Add(constantLine1);// Create a strip with its maximum and minimum axis value defined.数值带xAxis.Strips.Add(new Strip("Strip 1", 2, 9));// Enable automatic scale breaks creation, and define their maximum number.启用自动刻度分隔线diagram.AxisY.AutoScaleBreaks.Enabled = true;diagram.AxisY.AutoScaleBreaks.MaxCount = 559;// Add scale breaks to the Y-axis collection, with their Edge1 and Edge2 properties defined in the constructor.人工把刻度分隔线插入到轴中diagram.AxisY.ScaleBreaks.Add(new ScaleBreak("Scale Break 1", 110, 100));diagram.AxisY.ScaleBreaks.Add(new ScaleBreak("Scale Break 2", 110, 2000));// Customize the appearance of the axes' grid lines.网格显示和设置diagram.AxisY.GridLines.Visible = true;diagram.AxisY.GridLines.MinorVisible = true;diagram.AxisX.GridLines.Visible = true;diagram.AxisX.GridLines.MinorVisible = true;// Customize the appearance of the axes' tickmarks.刻度线显示和设置diagram.AxisY.Tickmarks.Visible = false;diagram.AxisY.Tickmarks.MinorVisible = false;//定制窗格的滚动条的外观ScrollBarOptions scrollBarOptions = diagram.DefaultPane.ScrollBarOptions;scrollBarOptions.BackColor = Color.White;scrollBarOptions.BarColor = Color.Blue;scrollBarOptions.BorderColor = Color.Navy;scrollBarOptions.BarThickness = 25;scrollBarOptions.XAxisScrollBarAlignment = ScrollBarAlignment.Far;scrollBarOptions.XAxisScrollBarVisible = true;// Obtain a diagram and clear its collection of panes.diagram.Panes.Clear();// Create a pane for each series.for (int i = 1; i < pointChart.Series.Count; i++){XYDiagramPane pane = new XYDiagramPane("The Pane's nnnName");diagram.Panes.Add(pane);XYDiagramSeriesViewBase view = (XYDiagramSeriesViewBase)pointChart.Series[i].View;view.Pane = pane;}AxisY myAxis = ((XYDiagram)pointChart.Diagram).AxisY;}#endregionprivate void dynamiCurve_Load(object sender, EventArgs e){timer1.Enabled = false;Task t = new Task(() => { lineLoop(); });t.Start();}private void timer1_Tick(object sender, EventArgs e){//RealtimeChart();lineLoop();}private void dynamiCurve_FormClosing(object sender, FormClosingEventArgs e){Environment.Exit(0);}}
}
效果如下










![使用 String[] values = request.getParameterValues(key);出现的问题 ,Ajax Post 提交数组参数后台无法接收](https://img-blog.csdnimg.cn/20201112220839183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzMxNDAxOQ==,size_16,color_FFFFFF,t_70#pic_center)

