temp chart temp chart说明书

TeeChart使用手册

pdf版下载地址TeeChart库下载

文章目录

• TeeChart使用手册

• 1、TeeChart.dll、TeeChart8.ocx、TeeChart.WPF.dll优缺点

• 1.1 TeeChart.dll
• 1.2 TeeChart8.ocx
• 1.3 TeeChart.WPF.dll

• 2、Windows窗体应用(.NET Framework) + TeeChart.dll

• 2.1 创建工程
• 2.2 添加TeeChart.dll
• 2.3. 基本参数设置

• 2.3.1 代码设置
• 2.3.2 代码实现效果
• 2.3.3 图像界面设置
• 2.3.4 界面设置实现效果

• 3、Windows窗体应用(.NET Framework) + TeeChart8.ocx

• 3.1 创建工程
• 3.2 添加TeeChart8.ocx
• 3.3. 基本参数设置

• 3.3.1 代码设置
• 3.3.2 代码实现效果
• 3.3.3 图像界面设置
• 3.3.4 界面设置实现效果

• 4、WPF应用(.NET Framework) + TeeChart.WPF.dll

• 4.1 创建工程
• 4.2 添加TeeChart.WPF.dll
• 4.3. 基本参数设置

• 4.3.1 代码设置
• 4.3.2 代码实现效果

• 5、动态绘制图表

• 5.1 TeeChart.dll实现

• 5.1.1 不同条件实现效果
• 5.1.2 TeeChart.dll绘图效率测试结果

• 5.2 TeeChart8.ocx实现

• 5.2.1 不同条件实现效果
• 5.2.2 TeeChart8.ocx绘图效率测试结果

• 5.3 TeeChart.WPF.dll实现

• 5.3.1 不同条件实现效果
• 5.3.2 TeeChart.WPF.dll绘图效率测试结果

• 6、Add-数据添加函数解析

返回顶部

1、TeeChart.dll、TeeChart8.ocx、TeeChart.WPF.dll优缺点

• TeeChart.dll、TeeChart8.ocx、TeeChart.WPF.dll数据绘制效率表

绘制数据量	TeeChart.dll	TeeChart8.ocx	TeeChart.WPF.dll
>16000（带端点）	高	中	低
<16000（带端点）	中	高	低
任意数量（不带端点）	中	高	低

• TeeChart.dll、TeeChart8.ocx、TeeChart.WPF.dll流畅绘制的数据量范围

绘制方式	TeeChart.dll	TeeChart8.ocx	TeeChart.WPF.dll
带端点	<2000	<2500	<1500
不带端点	<6000	<8000	<2500

返回顶部

1.1 TeeChart.dll

• 缺点：

• TeeChart.dll在显示效果上较差，如图所示，添加控件后默认情况下在缩放是鼠标的选框会出现偏移、虚影、重叠、闪烁的情况，图中红圈为鼠标位置。
  

• 解决方法(1)：进入TeeChart Editor界面 –> Chart –>General –>Zoom –>Pen 然后修改任意一项参数，就不会出现选框偏移、闪烁等问题，而虚影、选框重叠的问题还是存在，第一次修改后会在Form.Designer.cs文件中生成相应的代码，第二次以后修改不会生成，这导致第二次以后修改的参数不会生效，只有删除第一次生成的代码再设置才能生成。
• 解决方法(2)：在程序中添加任意一条设置Zoom参数的代码就不会出现选框偏移等问题，如：
  tChart1.Zoom.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;

• TeeChart.dll的TeeChart Editor界面存在字体模糊，缺失，被遮挡的情况。

• 优点：

• 在TeeChart.dll的TeeChart Editor界面中设置的参数会在Form.Designer.cs文件中自动生成相应的代码，步骤清晰，利于通过代码绘制图标，可用于学习每个参数、功能的代码实现方式。
• TeeChart.dll在使用时支持.NET Framework 4及4以上的框架。
• 具有较多重载函数，结构清晰，使用简单方便。
• TeeChart.dll添加大量数据的效率高于TeeChart8.ocx，和TeeChart.WPF.dll差不多。
• TeeChart.dll在绘制超过16000个带端点的数据时效率最高。

返回顶部

1.2 TeeChart8.ocx

• 缺点：

• 在TeeChart8.ocx的Editing界面上设置的参数、内容并不会在Form.Designer.cs文件中生成相应的代码，而是将控件的设置信息编码后写入Form.resx文件中，不利于使用代码实现TeeChart8.ocx的图表功能，如下图。
• TeeChart8.ocx大部分类、函数、参数、实现方式与TeeChart.dll、TeeChart.WPF.dll差异较大，所以在从TeeChart.dll、TeeChart.WPF.dll转到TeeChart8.ocx后使用代码实现时不是很方便。
• TeeChart8.ocx在使用时支持**.NET Framework 4.5及4.5以上的框架，当使用框架低于4.5时，在运行程序时会出现异常。**

• 优点：

• TeeChart8.ocx的Editing界面在显示效果上要优于TeeChart.dll，功能逻辑更清晰，较少出现字体模糊、被遮挡的情况，使用图像界面实现图表效率高于TeeChart.dll。

• 在图表种类上TeeChart8.ocx 有121种，TeeChart.dll有104种。
• TeeChart8.ocx添加大量数据的速度较慢，略低于TeeChart.dll和TeeChart.WPF.dll。
• TeeChart8.ocx 在绘制小于16000个带端点的数据时效率最高，绘制任意数量不带端点的数据效率最高。

返回顶部

1.3 TeeChart.WPF.dll

• 缺点：

• TeeChart.WPF.dll没有图形设置窗口，不能通过图形界面进行设置，开发效率较低。
• 部分的功能、参数也被弃用，在使用上不易上手，代码实现效率较低。
• 大概率出现某一组数据绘制失败的情况，且与数据量无关。
• TeeChart.WPF.dll 绘制任意数量的数据效率都比较低，能流畅绘制的数据量小。

• 优点：

• TeeChart.WPF.dll的部分类、函数、参数与TeeChart.dll相同，在熟悉TeeChart.dll代码实现的情况下使用TeeChart.WPF.dll会更容易。
• TeeChart.WPF.dll在使用时支持**.NET Framework 4及4以上**的框架。
• TeeChart.WPF.dll添加大量数据的效率高于TeeChart8.ocx，和TeeChart.dll差不多。

返回顶部

2、Windows窗体应用(.NET Framework) + TeeChart.dll

2.1 创建工程

• 打开Visual studio，将选项栏设置为C# — windows — 桌面，如下图：

• 选择Windows窗体应用(.NET Framework)，然后点击下一步，设置好项目名称和位置，点击创建，创建成功后如下图。

返回顶部

2.2 添加TeeChart.dll

• 选择窗口左上角(根据每个人Visual studio设置不同而位置不同)的工具箱。
• 在工具栏中任意处点击鼠标右键，选择添加选项卡。

• 设置好选项卡名字后，在新建的选项卡上点击鼠标右键，点击选择项。

• 进入选择工具项后，选择**.NET Framework组件**，点击浏览，然后然后找到存放TeeChart.dll的路径，再点击确定。

• 这样新建的选项卡中就添加进了Teechart。

返回顶部

2.3. 基本参数设置

2.3.1 代码设置

• 从工具栏找到刚添加的TChart，使用鼠标左键拖入设计窗口。

• 鼠标左键选中添加的TChart，按R键进入属性栏，找到布局 –> Dock，设置为fill。

• 进入Form.cs文件，创建一个函数DrawImage()，根据需要使用下表中的程序语句设置Chart的常用基本参数。

private void SetChart()
{
    /*******************图表窗体设置********************************/
    chartMove.Aspect.View3D = false;                      //关闭控件3D效果 默认为true
    //chartMove.Aspect.Chart3DPercent = 100;              //3D效果度大小
    chartMove.Legend.CheckBoxes = true;                   //是否需要勾选，如果只有一种数据，且设置为false时，显示每个点的纵坐标
    chartMove.Legend.Visible = true;                      //直线标题集合(图例)是否显示
    chartMove.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom; //直线标题显示位置
    chartMove.Header.Text = "teeChart.dll动态绘图";  //Tchart窗体标题
    chartMove.Axes.Visible = true;                        //是否显示坐标
    chartMove.Axes.Left.Title.Text = "Y轴";               //左侧标题
    chartMove.Axes.Bottom.Title.Text = "X轴";             //底部标题
    chartMove.Axes.Left.Title.Visible = true;             //坐标标题是否可见
    chartMove.Axes.Left.Title.Angle = 0;                  //设置坐标摆放角度，纵坐标默认为90
    chartMove.Axes.Left.Labels.Style = Steema.TeeChart.AxisLabelStyle.Auto; //Y轴样式
    chartMove.Axes.Left.Labels.Angle = 0;                 //yx轴的Label显示样式（旋转角度）
    chartMove.Walls.Visible = true;                       //是否显示图表边框
    chartMove.Walls.Back.Transparent = false;             //背景是否透明
    chartMove.Walls.Back.Gradient.Visible = true;         //是否显示背景
    //chartMove.Walls.Back.Gradient.MiddleColor = Color.FromArgb(0, 100,200);   //背景渐变色
    chartMove.Axes.Left.Grid.Visible = true;              //是否显示横行网格

    /*******************红色直线创建并设置***************************/
    Steema.TeeChart.Styles.Line l_lineRed = new Steema.TeeChart.Styles.Line();  //创建直线对象
    l_lineRed.Title = "直线red";                              //标题
    l_lineRed.Color = Color.FromArgb(250, 50, 0);            //直线颜色
    //line1.ColorEach = true;                            //直线使用所有颜色
    l_lineRed.ShowInLegend = true;                           //是否显示直线标题 true/false 默认为true
    l_lineRed.Pointer.Visible = true;                        //显示端点
    l_lineRed.Pointer.Style = Steema.TeeChart.Styles.PointerStyles.Sphere;  //设置端点样式
    chartMove.Series.Add(l_lineRed);                         //添加直线

    /*******************绿色直线创建并设置******************************/
    Steema.TeeChart.Styles.Line l_lineGreen = new Steema.TeeChart.Styles.Line();
    l_lineGreen.Title = "直线green";
    l_lineGreen.Color = Color.FromArgb(0, 255, 0);
    l_lineGreen.ShowInLegend = true;
    l_lineGreen.Pointer.Visible = true;
    l_lineGreen.Pointer.Style = Steema.TeeChart.Styles.PointerStyles.Rectangle;
    chartMove.Series.Add(l_lineGreen);

    /*******************添加鼠标监听，标记提示*************************/
    Steema.TeeChart.Tools.MarksTip l_marks = new Steema.TeeChart.Tools.MarksTip();  //创建标记提示对象
    l_marks.Style = Steema.TeeChart.Styles.MarksStyles.XY; //显示信息设为X Y
    chartMove.Tools.Add(l_marks);
    l_marks.MouseDelay = 200;                              //设置延时时间,注意必须再Add(marksTip)
    l_marks.HideDelay = 1500;

    /*******************添加数据显示数据*****************************/
    //第一种添加方式，单个点添加
    /*Random l_ran = new Random();                             //随机数种子
            for (int i = 0; i < 10000; i++)
            {
                chartMove.Series[0].Add(i, l_ran.Next(400, 900));     //添加数据点
                chartMove.Series[1].Add(i, l_ran.Next(100, 500));    //添加数据点
            }*/

    //第二种添加方式，添加数组
    Random l_ran = new Random();                             //随机数种子
    int[] l_arrX = new int[10000];
    int[] l_arrRedY = new int[10000];
    int[] l_arrGreenY = new int[10000];
    for (int i = 0; i < 10000; i++)
    {
        l_arrX[i] = i;
        l_arrRedY[i] = l_ran.Next(400, 900);
        l_arrGreenY[i] = l_ran.Next(100, 500);
    }
    Console.WriteLine("添加前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加前系统时间
    chartMove.Series[0].Add(l_arrX, l_arrRedY);           //添加数组
    chartMove.Series[1].Add(l_arrX, l_arrGreenY);
    Console.WriteLine("添加后：" + DateTime.Now.ToString("mm:ss:fff")); //打印数据添加后系统时间
}

• 数据添加方式效率对比

• 单位： 分：秒：毫秒
• 数据量： 10000 * 2个数据点
• public int Add(double x, double y); //添加点

• 添加前：48:35:896
  添加后：48:35:901
  消耗：5 毫秒
• 添加前：49:53:762
  添加后：49:53:768
  消耗：6 毫秒
• 添加前：53:31:880
  添加后：53:31:885
  消耗：5 毫秒

• public void Add(Array xValues, Array yValues); //添加数组

• 添加前：35:39:089
  添加后：35:39:092
  消耗：3 毫秒
• 添加前：33:58:818
  添加后：33:58:820
  差：2 毫秒
• 添加前：11:30:878
  添加后：11:30:881
  消耗：3 毫秒

• 综合得出

• 点添加方式：消耗时间在5-6毫秒左右；
• 数组添加方式：消耗时间在2-3毫秒左右。
• **结论：数组添加方式效率比点添加方式快一倍。**详情请看：Add函数解析

返回顶部

2.3.2 代码实现效果

返回顶部

2.3.3 图像界面设置

• 从工具栏找到刚添加的TChart，使用鼠标左键拖入设计窗口。
• 鼠标左键选中添加的TChart，按R键进入属性栏，找到布局 –> Dock，设置为fill。
• 鼠标右键点击添加的TChart，选择属性。

• 会进入TeeChart Editor界面，该界面主要能设置Chart、Series、Data、Print、Export、Tools、Animations、Themes八项。

• 基本设置步骤

• 选择表的种类、样式：Chart –> Series –> Add.

• 选择这里取消勾选左下角 view 3D，选择3D分类 –> point 3D（不是必须，可选择其它类），点击OK.

• Chart会变成所选的图表样式，左下角出现一个points3D1。

• 设置图形窗口是否为3D、3D的效果程度：Chart –> 3D

• 勾选3，开启3D效果，这里可勾选也可不勾选。
• 3D% ：在勾选3后设置3D效果度大小。

• 设置边框和背景：Chart –> Walls
• Visible Walls ：是否显示边框
• Left\Right\Back\Bottom：设置单面边框

• 设置point3D端点的颜色：Series –> Format

• 设置线条的样式：Series –> Format

• 设置端点的样式：Series –> Points

• 设置横坐标、纵坐标刻度显示数据类型、Legend的显示类型。

• 设置标记提示：Tools –> “+”号。

• 选择Mark Tips –> Add.

• 设置标记提示

• style ：设置显示信息，这里改为X and Y values.
• move：鼠标移动到目标点上就显示。
• Click：鼠标点击目标点然后显示。
• Delay：设置响应时间。
• Hide Delay：设置显示时间。

• 窗口左下角出现marksTip1。

• 可通过选中窗口左下角的图标，点击图标右上角的三角图标 –> Edit 来设置相应属性参数。

• 添加数据：进入Form.cs文件，写入下列代码。

Random l_ran = new Random();                       //随机数种子
int[] l_arrX = new int[10000];
int[] l_arrY = new int[10000];
int[] l_arrZ = new int[10000];
for (int i = 0; i < 10000; i++)
{
    l_arrX[i] = i;
  l_arrY[i] = l_ran.Next(400, 900);
    l_arrZ[i] = l_ran.Next(100, 500);
}
points3D1.Add(l_arrX, l_arrY, l_arrZ);           //添加数组

返回顶部

2.3.4 界面设置实现效果

返回顶部

3、Windows窗体应用(.NET Framework) + TeeChart8.ocx

3.1 创建工程

• 打开Visual studio，将选项栏设置为C# — windows — 桌面。
• 选择Windows窗体应用(.NET Framework)，然后点击下一步，设置好项目名称和位置，点击创建。

• 需要注意的时这里的框架不能低于**.NET Framework 4.5**，否则使用TeeChart8.ocx时会报错。

返回顶部

3.2 添加TeeChart8.ocx

• 选择窗口左上角(根据每个人Visual studio设置不同而位置不同)的工具箱。
• 在工具栏中任意处点击鼠标右键，选择添加选项卡。
• 设置好选项卡名字后，在新建的选项卡上点击鼠标右键，点击选择项。
• 进入选择工具项后，选择COM组件，找到并勾选TeeeChart Pro Activex control v8，再点击确定。
• 这样新建的选项卡中就添加进了Teechart。

返回顶部

3.3. 基本参数设置

3.3.1 代码设置

• 从工具栏找到刚添加的TeeChart Pro Activex control v8，使用鼠标左键拖入设计窗口。

• 鼠标左键选中添加的TChart，按R键进入属性栏，找到布局 –> Dock，设置为fill。
• 进入Form.cs文件，创建两个函数DrawImage()、ColorToUint(Color color)，根据需要使用下表中的程序语句设置AxTChart的常用基本参数。

/// <summary>
/// 将Color的RGB值转换为uint值
/// </summary>
/// <param name="color"></param>
/// <returns></returns>
private uint ColorToUint(Color color)
{
    return (uint)(((uint)color.B << 16) | (ushort)(((ushort)color.G << 8) | color.R));
}
/// <summary>
/// 静态图表绘制
/// </summary>
private void SetChart()
{

    /*******************图表窗体设置********************************/
    //axTChartMove.Header.Text.Clear();              //清空标题
    //axTChartMove.Header.Text.Add("TeeChar8.ocx");  //添加窗口标题，先清空原有标题
    axTChartMove.Header.Text.Text = "TeeChar8.ocx";  //设置tchart窗口标题
    axTChartMove.Axis.Left.Title.Caption = "Y轴";    //设置X轴Y轴标题
    axTChartMove.Axis.Bottom.Title.Caption = "X轴";
    axTChartMove.Axis.Left.Title.Angle = 0;          //设置标题的旋转角度
    axTChartMove.Aspect.View3D = false;              //是否显示3D效果
    /*axTChartMove.Axis.Bottom.SetMinMax(0, 200);    //设置刻度显示范围
            axTChartMove.Axis.Left.SetMinMax(0, 1000);*/
    axTChartMove.Axis.Left.Increment = 10;           //设置Y轴最小刻度
    axTChartMove.Legend.CheckBoxes = true;           //是否需要勾选

    /*******************红色直线创建并设置***************************/
    axTChartMove.AddSeries(TeeChart.ESeriesClass.scLine);     //创建并添加直线对象
    axTChartMove.Series(0).Title = "直线red";                   //设置线条名
    axTChartMove.Series(0).asLine.Pointer.Style = TeeChart.EPointerStyle.psCircle;   //设置端点的样式形状
    axTChartMove.Series(0).asLine.Pointer.HorizontalSize = 4;  //设置端点宽
    axTChartMove.Series(0).asLine.Pointer.VerticalSize = 4;    //设置端点高
    axTChartMove.Series(0).asLine.Pointer.Visible = true;      //是否显示端点
    axTChartMove.Series(0).Color = ColorToUint(Color.FromArgb(255, 0, 0));   //设置直线颜色

    /*******************蓝色直线创建并设置*****************************/
    axTChartMove.AddSeries(TeeChart.ESeriesClass.scLine);      //创建并添加直线对象
    axTChartMove.Series(1).Title = "直线blue";                   //设置线条名
    axTChartMove.Series(1).asLine.Pointer.Style = TeeChart.EPointerStyle.psCircle; //设置端点的样式形状
    axTChartMove.Series(1).asLine.Pointer.HorizontalSize = 4;  //设置端点宽
    axTChartMove.Series(1).asLine.Pointer.VerticalSize = 4;    //设置端点高
    axTChartMove.Series(1).asLine.Pointer.Visible = true;      //是否显示端点
    axTChartMove.Series(1).Color = ColorToUint(Color.FromArgb(0, 0, 255));

    /*******************添加鼠标监听，标记提示*************************/
    axTChartMove.Tools.Add(TeeChart.EToolClass.tcMarksTip);   //标记提示
    axTChartMove.Tools.Items[0].asMarksTip.Style = TeeChart.EMarkStyle.smsXY;  //设置提示信息显示样式

    /*******************设置鼠标缩放**********************************/
    Color l_cZoom = Color.FromArgb(0, 0, 0);
    axTChartMove.Zoom.Pen.Color = ColorToUint(l_cZoom);     //设置鼠标缩放选框颜色
    axTChartMove.Zoom.Pen.Style = TeeChart.EChartPenStyle.psDashDot;  //选框线条样式设置

    /*******************添加数据显示数据*****************************/
    //第一种添加方式，单个点添加
    /*            Random l_ran = new Random();                        //随机数种子
            for (int i = 0; i < 10000; i++)
            {
                axTChartMove.Series(0).AddXY(i, l_ran.Next(500, 900), "", axTChartMove.Series(0).Color); //添加数据点
                axTChartMove.Series(1).AddXY(i, l_ran.Next(100, 600), "", axTChartMove.Series(1).Color);
            }*/

    //第二种添加方式，添加数组
    Random l_ran = new Random();                        //随机数种子
  int[] l_arrX = new int[10000];
    int[] l_arrRedY = new int[10000];
    int[] l_arrBlueY = new int[10000];

    for (int i = 0; i < 10000; i++)
    {
        l_arrX[i] = i;
        l_arrRedY[i] = l_ran.Next(400, 900);
        l_arrBlueY[i] = l_ran.Next(100, 500);
    }
    Console.WriteLine("添加前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加前系统时间
    axTChartMove.Series(0).AddArray(10000, l_arrRedY, l_arrX);             //添加数组数据
    axTChartMove.SeriesList.Items[1].AddArray(10000, l_arrBlueY, l_arrX);  //效果和上面相同
    Console.WriteLine("添加后：" + DateTime.Now.ToString("mm:ss:fff ")); //打印数据添加后系统时间

• 数据添加方式效率对比

• 单位： 分：秒：毫秒
• 数据量： 10000 * 2个数据点
• int AddXY(double AX, double AY, string ALabel, uint Value); //添加点

• 添加前：54:47:115
  添加后：54:47:826
  消耗：711 毫秒
• 添加前：55:35:540
  添加后：55:35:884
  消耗：344 毫秒
• 添加前：03:40:087
  添加后：03:40:516
  消耗：429 毫秒

• void AddArray(int ArraySize, object YArray, object XArray); //添加数组

• 添加前：14:55:456
  添加后：14:55:460
  消耗：4 毫秒
• 添加前：15:51:258
  添加后：15:51:262
  消耗：4 毫秒
• 添加前：16:20:728
  添加后：16:20:732
  消耗：4 毫秒

• 综合得出

• 点添加方式：消耗时间在344-711毫秒左右；
• 数组添加方式：消耗时间在4毫秒左右。
• 结论：数组添加方式效率比点添加方式快了百倍。

返回顶部

3.3.2 代码实现效果

返回顶部

3.3.3 图像界面设置

• 从工具栏找到刚添加的axTChart1，使用鼠标左键拖入设计窗口。
• 鼠标左键选中添加的axTChart1，按R键进入属性栏，找到布局 –> Dock，设置为fill。
• 鼠标右键点击添加的axTChart1，选择属性。
• 会进入到如图所示窗口，点击**Edit Chart…**开始编辑图表。
• 进入编辑栏后如图所示，窗口左侧时选项卡主要有Series、Chart、Data、Tools、Export、Print、Themes几部分组成，窗口中部及右侧是点击选项卡后相应的设置区域。

• 基本设置步骤。

• 选择表的种类、样式： Series –> Add.
• 选择这里取消勾选左下角 view 3D，选择3D分类 –> point 3D，点击OK。

• axTChart1会变成所选的图表样式。
• 设置图表标题： Chart –> General –> Fonts –> Font

• 窗口中部选项栏选择 Title ，可再 Font设置图表标题的字体大小、字体类型、字体颜色等。

• 设置坐标轴刻度：Axis –> Scales

• Minimum –> Change :设置坐标轴刻度最小取值范围。
• Maximum –> Change:设置坐标轴刻度最大取值范围。
• Increment –> Change:设置坐标轴刻度增量。
• Axis –> Labels–> Text–> Font 可设置坐标轴刻度的字体类型、字体大小、字体颜色等。

• 设置坐标轴标题：Axis –> Title –> style

• Style –> Title 里输入标题内容。
• 可选择标题的位置：Left Axis、Right Axis等。
• Angle 设置标题的旋转角度。
• Size设置标题区域大小。
• Visible设置是否显示标题。

• Axis –> Title –> Format –> Text –> Font 可设置坐标轴标题的字体类型、字体大小、字体颜色等。

• 设置线条：Series0 –> Format

• color：设置端点颜色。
• Color Each ：使用任意颜色。
• Line … ：设置线条颜色、样式、大小等。

• 设置端点：Series0 –> Point

• 设置端点样式、大小等。

• 设置缩放功能：Chart –> Zoom

• Allow : 是否使用缩放功能
• Pen… ：设置缩放选框的颜色、样式、线条粗细等。
• Minimum Pixels：设置选框选择的最小像素大小。
• Mouse Button：设置缩放功能是使用鼠标哪一个键。

• 设置标记提示
• 添加工具：Tools –> Add
• 选择Mark Tips，点击Add .
• style ：设置显示信息，这里改为X and Y values.
• move：鼠标移动到目标点上就显示。
• Click：鼠标点击目标点然后显示。
• Delay：设置响应时间。
• Hide Delay：设置显示时间。
• 添加数据：进入Form.cs文件，写入下列代码。

Random l_ran = new Random();                        //随机数种子
int[] l_arrX = new int[10000];
int[] l_arrRedY = new int[10000];
int[] l_arrBlueY = new int[10000];

for (int i = 0; i < 10000; i++)
{
    l_arrX[i] = i;
    l_arrRedY[i] = l_ran.Next(400, 900);
    l_arrBlueY[i] = l_ran.Next(100, 500);
}
axTChartMove.Series(0).AddArray(10000, l_arrRedY, l_arrX);             //添加数组数据
axTChartMove.SeriesList.Items[1].AddArray(10000, l_arrBlueY, l_arrX);  //效果和上面相同

<p align="right"><a href="#top">返回顶部</a></p>

3.3.4 界面设置实现效果

返回顶部

4、WPF应用(.NET Framework) + TeeChart.WPF.dll

4.1 创建工程

• 打开Visual studio，将选项栏设置为C# — windows — 桌面。
• 选择WPF应用(.NET Framework)，然后点击下一步，设置好项目名称和位置，点击创建。

返回顶部

4.2 添加TeeChart.WPF.dll

• 选择窗口左上角(根据每个人Visual studio设置不同而位置不同)的工具箱。
• 在工具栏中任意处点击鼠标右键，选择添加选项卡。
• 设置好选项卡名字后，在新建的选项卡上点击鼠标右键，点击选择项。
• 进入选择工具项后，选择WPF组件，点击浏览，然后然后找到存放TeeChart.dll的路径，再点击确定。
• 这样新建的选项卡中就添加进了Teechart。

返回顶部

4.3. 基本参数设置

4.3.1 代码设置

• 从工具栏找到刚添加的TChart，使用鼠标左键拖入设计窗口。
• 鼠标右键点击添加的TChart，选择布局 –> 全部填充。
• 选中刚添加的TChart控件，在窗口右边的属性栏设置控件名称。
• 进入MainWindow.xaml.cs文件，创建一个函数DrawImage()，根据需要使用下表中的程序语句设置Chart的常用基本参数。

private void SetChart()
{
    /*******************图表窗体设置********************************/
    chartMove.Aspect.View3D = false;               //控件3D效果
    chartMove.Header.Text = "WPF使用TeeChart.WPF"; //设置窗体标题
    chartMove.Legend.Visible = true;              //图例
    chartMove.Legend.Color = Color.FromRgb(100, 200, 200);   //设置图例背景颜色
    chartMove.Axes.Visible = true;                //是否显示坐标轴
    chartMove.Axes.Left.Title.Text = "Y轴";       //Y轴标题
    chartMove.Axes.Bottom.Title.Text = "X轴";     //X轴标题
    chartMove.Axes.Left.Title.Visible = true;    //坐标轴标题是否可见
    chartMove.Axes.Left.Title.Angle = 0;         //坐标轴标题旋转角度
    chartMove.Axes.Left.Labels.Style = Steema.TeeChart.WPF.AxisLabelStyle.Auto;//Y轴样式
    chartMove.Axes.Left.Labels.Angle = 20;    //坐标轴刻度标签旋转角度
    chartMove.Axes.Bottom.Grid.Visible = true;    //是否显示网格

    /*******************蓝色直线创建并设置*****************************/
    Steema.TeeChart.WPF.Styles.Line l_lineBlue = new Steema.TeeChart.WPF.Styles.Line();   //创建line
    l_lineBlue.Color = Color.FromRgb(0, 0, 200);    //设置线颜色
    l_lineBlue.Title = "直线blue";
    l_lineBlue.Pointer.Visible = true;              //设置开启端点
    chartMove.Series.Add(l_lineBlue);               //line添加进TChart

    /*******************绿色直线创建并设置***************************/
    Steema.TeeChart.WPF.Styles.Line l_lineGreen = new Steema.TeeChart.WPF.Styles.Line();   //创建line
    l_lineGreen.Color = Color.FromRgb(0, 200, 0);    //设置线颜色
    l_lineGreen.Title = "直线green";
    l_lineGreen.Pointer.Visible = true;
    chartMove.Series.Add(l_lineGreen);

    /*******************添加鼠标监听，标记提示*************************/
    Steema.TeeChart.WPF.Tools.MarksTip l_marks = new Steema.TeeChart.WPF.Tools.MarksTip();
    l_marks.Style = Steema.TeeChart.WPF.Styles.MarksStyles.XY;    //设置提示信息样式
    l_marks.MouseAction = Steema.TeeChart.WPF.Tools.MarksTipMouseAction.Click;       //设置触发响应方式
    chartMove.Tools.Add(l_marks);

    /*******************添加数据显示数据*****************************/
    //第一种添加方式，单个点添加
    /*Random l_ran = new Random();                          //随机数种子
            for (int i = 0; i < 10000; i++)
            {
                chartMove.Series[0].Add(i, l_ran.Next(600, 1000));       //添加数据点                    
                chartMove.Series[1].Add(i, l_ran.Next(200, 700));         //添加数据点 
            }*/

    //第二种添加方式，添加数组
    Random l_ran = new Random();                          //随机数种子
    int[] l_arrX = new int[10000];
    int[] l_arrBlueY = new int[10000];
    int[] l_arrGreenY = new int[10000];
    for (int i = 0; i < 10000; i++)
    {
        l_arrX[i] = i;
        l_arrBlueY[i] = l_ran.Next(100, 500);
        l_arrGreenY[i] = l_ran.Next(400, 900);
    }
    Console.WriteLine("添加前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加前系统时间
    chartMove.Series[0].Add(l_arrX, l_arrBlueY);       //添加数组数据
    chartMove.Series[1].Add(l_arrX, l_arrGreenY);
    Console.WriteLine("添加后：" + DateTime.Now.ToString("mm:ss:fff "));  //打印数据添加后系统时间
}

• 数据添加方式效率对比

• 单位： 分：秒：毫秒
• 数据量： 10000 * 2个数据点
• public virtual int Add(double x, double y); //添加点

• 添加前：42:25:431
  添加后：42:25:438
  消耗：7 毫秒
• 添加前：43:29:754
  添加后：43:29:760
  消耗：6 毫秒
• 添加前：44:03:966
  添加后：44:03:972
  消耗：6 毫秒

• public void Add(Array xValues, Array yValues); //添加数组

• 添加前：55:20:610
  添加后：55:20:613
  消耗：3 毫秒
• 添加前：55:32:508
  添加后：55:32:511
  消耗：3 毫秒
• 添加前：55:47:579
  添加后：55:47:581
  消耗：2 毫秒

• 综合得出

• 点添加方式：消耗时间在6-7毫秒左右；
• 数组添加方式：消耗时间在2-3毫秒左右。
• 结论：数组添加方式效率比点添加方式快一倍。

返回顶部

4.3.2 代码实现效果

返回顶部

5、动态绘制图表

5.1 TeeChart.dll实现

/// <summary>
/// 图表参数设置
/// </summary>
private void SetChart()
{
    /*******************图表窗体设置********************************/
    chartMove.Aspect.View3D = false;                      //关闭控件3D效果 默认为true
    chartMove.Legend.CheckBoxes = true;                   //是否需要勾选，如果只有一种数据，且设置为false时，显示每个点的纵坐标
    chartMove.Legend.Visible = true;                      //直线标题集合(图例)是否显示
    chartMove.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom; //直线标题显示位置
    chartMove.Header.Text = "teeChart.dll动态绘图";  //Tchart窗体标题
    chartMove.Axes.Visible = true;                        //是否显示坐标
    chartMove.Axes.Left.Title.Text = "Y轴";               //左侧标题
    chartMove.Axes.Bottom.Title.Text = "X轴";             //底部标题
    chartMove.Axes.Left.Title.Visible = true;             //坐标标题是否可见
    chartMove.Axes.Left.Title.Angle = 0;                  //设置坐标摆放角度，纵坐标默认为90
    chartMove.Axes.Left.Labels.Style = Steema.TeeChart.AxisLabelStyle.Auto; //Y轴样式
    chartMove.Axes.Left.Labels.Angle = 0;                 //yx轴的Label显示样式（旋转角度）
    chartMove.Walls.Visible = true;                       //是否显示图表边框
    chartMove.Walls.Back.Transparent = false;             //背景是否透明
    chartMove.Walls.Back.Gradient.Visible = true;         //是否显示背景
    chartMove.Axes.Left.Grid.Visible = true;              //是否显示横行网格

    /*******************红色直线创建并设置***************************/
    Steema.TeeChart.Styles.Line l_lineRed = new Steema.TeeChart.Styles.Line();  //直线
    l_lineRed.Title = "直线red";                               //标题
    l_lineRed.Color = Color.FromArgb(250, 50, 0);            //直线颜色
    //line1.ColorEach = true;                            //直线使用所有颜色
    l_lineRed.ShowInLegend = true;                           //是否显示直线标题 true/false 默认为true
    l_lineRed.Pointer.Visible = true;                        //显示端点
    l_lineRed.Pointer.Style = Steema.TeeChart.Styles.PointerStyles.Sphere;  //设置端点样式
    chartMove.Series.Add(l_lineRed);                         //添加直线

    /*******************绿色直线创建并设置*****************************/
    Steema.TeeChart.Styles.Line l_lineGreen = new Steema.TeeChart.Styles.Line();
    l_lineGreen.Title = "直线green";
    l_lineGreen.Color = Color.FromArgb(0, 255, 0);
    l_lineGreen.ShowInLegend = true;
    l_lineGreen.Pointer.Visible = true;
    l_lineGreen.Pointer.Style = Steema.TeeChart.Styles.PointerStyles.Rectangle;
    chartMove.Series.Add(l_lineGreen);

    /*******************添加鼠标监听，标记提示*************************/
    Steema.TeeChart.Tools.MarksTip l_marks = new Steema.TeeChart.Tools.MarksTip();  //创建标记提示对象
    l_marks.Style = Steema.TeeChart.Styles.MarksStyles.XY; //显示信息设为X Y
    chartMove.Tools.Add(l_marks);
    l_marks.MouseDelay = 200;                   //设置延时时间,注意必须在Add(l_marks)后，否则会报错
    l_marks.HideDelay = 1500;

}

/// <summary>
/// 子线程执行的方法
/// </summary>
protected void ThreadRun()
{
    while (true)
    {
        if (!m_thSwitch)
        {
            Thread l_thThis = Thread.CurrentThread;             //如果m_thSwitch为false，则销毁当前线程
            l_thThis.Abort();
        }
        else
        {
            int[] l_arrX = new int[10000];
            int[] l_arrY_red = new int[10000];
            int[] l_arrY_green = new int[10000];
            Random l_ran = new Random();                             //随机数种子
            for (int i = 0; i < 10000; i++)
            {
                l_arrX[i] = i;
                l_arrY_red[i] = l_ran.Next(200, 300);
                l_arrY_green[i] = l_ran.Next(300, 400);
            }

            Console.WriteLine("显示前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加显示前系统时间
            chartMove.Invoke(new Action(delegate ()                              //通过委托在UI线程绘制图像
                                        {
                                            chartMove.Series[0].Add(l_arrX, l_arrY_red);
                                            chartMove.Series[1].Add(l_arrX, l_arrY_green);
                                        }));
            Console.WriteLine("显示后：" + DateTime.Now.ToString("mm:ss:fff")); //打印数据添加显示后系统时间
        }
    }
}

private bool m_thSwitch = false;                        //用于判断线程是开启还是关闭

/// <summary>
/// 开始Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStart_Click(object sender, EventArgs e)
{
    if (!m_thSwitch)
    {
        ThreadStart l_start = new ThreadStart(ThreadRun);
        Thread l_thAddData = new Thread(l_start);           //创建子线程绘制图表数据
        m_thSwitch = true;
        l_thAddData.Start();                              //线程开始
    }
}
/// <summary>
/// 停止Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStop_Click(object sender, EventArgs e)
{
    m_thSwitch = false;                       //关闭线程
}

返回顶部

5.1.1 不同条件实现效果

• 以下数据皆为测试数据中随机抽取。
• 测试条件1： 同时显示两路数据、每路10000个数据点，共20000个数据点（带端点）。

• 显示前：55:19:646
  显示后：55:20:055
  消耗：409 毫秒
• 显示前：55:20:056
  显示后：55:20:457
  消耗：401毫秒
• 显示前：55:20:458
  显示后：55:20:865
  消耗：407 毫秒

• 测试条件2： 同时显示两路数据、每路10000个数据点，共20000个数据点（不带端点）

• 显示前：00:10:464
  显示后：00:10:586

消耗：122 毫秒

• 显示前：00:10:586
  显示后：00:10:711
  消耗：125 毫秒
• 显示前：00:10:711
  显示后：00:10:832
  消耗：121 毫秒

• 测试条件3： 同时显示两路数据、每路5000个数据点，共10000个数据点（带端点）。

• 显示前：04:39:917
  显示后：04:40:123
  消耗：206 毫秒
• 显示前：04:40:123
  显示后：04:40:338
  消耗：215 毫秒
• 显示前：04:40:338
  显示后：04:40:545
  消耗：207 毫秒

• 测试条件4： 同时显示两路数据、每路5000个数据点，共10000个数据点（不带端点）。

• 显示前：09:20:054
  显示后：09:20:118
  消耗：64 毫秒
• 显示前：09:20:118
  显示后：09:20:179
  消耗：61毫秒
• 显示前：09:20:179
  显示后：09:20:240
  消耗：61毫秒

• 测试条件5： 同时显示两路数据、每路1000个数据点，共2000个数据点（带端点）。

• 显示前：13:02:957
  显示后：13:03:005
  消耗：48 毫秒
• 显示前：13:03:005
  显示后：13:03:055
  消耗：50 毫秒
• 显示前：13:03:055
  显示后：13:03:100
  消耗：45 毫秒

• 测试条件6： 同时显示两路数据、每路1000个数据点，共2000个数据点（带端点）。

• 显示前：16:16:539
  显示后：16:16:556
  消耗：17
• 显示前：16:16:556
  显示后：16:16:574
  消耗：18
• 显示前：16:16:574
  显示后：16:16:599
  消耗：25

返回顶部

5.1.2 TeeChart.dll绘图效率测试结果

• 根据上方几组测试数据得出以下几点结论：

• 相同数据量下，不带端点比带端点绘制效率高3倍左右。
• TeeChart.dll绘图效率与数据量呈线性关系。
• 根据20帧左右为肉眼感觉的流畅度，带端点绘制一次大概最多绘制总量2000个数据，不带端点一次大概最多绘制总量6000个数据。

返回顶部

5.2 TeeChart8.ocx实现

/// <summary>
/// 将Color的RGB值转换为uint值
/// </summary>
/// <param name="color"></param>
/// <returns></returns>
private uint ColorToUint(Color color)
{
    return (uint)(((uint)color.B << 16) | (ushort)(((ushort)color.G << 8) | color.R));
}

/// <summary>
/// AxTChart基本参数设置
/// </summary>
private void SetChart()
{
    /*******************图表窗体设置********************************/
    axTChartMove.Header.Text.Text = "TeeChar8.ocx";  //设置tchart窗口标题
    axTChartMove.Axis.Left.Title.Caption = "Y轴";    //设置X轴Y轴标题
    axTChartMove.Axis.Bottom.Title.Caption = "X轴";
    axTChartMove.Axis.Left.Title.Angle = 0;          //设置标题的旋转角度
    axTChartMove.Aspect.View3D = false;              //是否显示3D效果
    axTChartMove.Axis.Left.Increment = 10;           //设置Y轴最小刻度
    axTChartMove.Legend.CheckBoxes = true;           //是否需要勾选

    /*******************红色直线创建并设置***************************/
    axTChartMove.AddSeries(TeeChart.ESeriesClass.scLine);     //创建并添加直线对象
    axTChartMove.Series(0).Title = "直线red";                   //设置线条名
    axTChartMove.Series(0).asLine.Pointer.Style = TeeChart.EPointerStyle.psCircle;   //设置端点的样式形状
    axTChartMove.Series(0).asLine.Pointer.HorizontalSize = 4;  //设置端点宽
    axTChartMove.Series(0).asLine.Pointer.VerticalSize = 4;    //设置端点高
    axTChartMove.Series(0).asLine.Pointer.Visible = true;      //是否显示端点
    axTChartMove.Series(0).Color = ColorToUint(Color.FromArgb(255, 0, 0));   //设置直线颜色

    /*******************蓝色直线创建并设置*****************************/
    axTChartMove.AddSeries(TeeChart.ESeriesClass.scLine);      //创建并添加直线对象
    axTChartMove.Series(1).Title = "直线blue";                   //设置线条名
    axTChartMove.Series(1).asLine.Pointer.Style = TeeChart.EPointerStyle.psCircle; //设置端点的样式形状
    axTChartMove.Series(1).asLine.Pointer.HorizontalSize = 4;  //设置端点宽
    axTChartMove.Series(1).asLine.Pointer.VerticalSize = 4;    //设置端点高
    axTChartMove.Series(1).asLine.Pointer.Visible = true;      //是否显示端点
    axTChartMove.Series(1).Color = ColorToUint(Color.FromArgb(0, 0, 255));

    /*******************添加鼠标监听，标记提示*************************/
    axTChartMove.Tools.Add(TeeChart.EToolClass.tcMarksTip);   //标记提示
    axTChartMove.Tools.Items[0].asMarksTip.Style = TeeChart.EMarkStyle.smsXY;  //设置提示信息显示样式

    /*******************设置鼠标缩放**********************************/
    Color l_cZoom = Color.FromArgb(0, 0, 0);
    axTChartMove.Zoom.Pen.Color = ColorToUint(l_cZoom);     //设置鼠标缩放选框颜色
    axTChartMove.Zoom.Pen.Style = TeeChart.EChartPenStyle.psDashDot;  //选框线条样式设置
}


/// <summary>
/// 子线程执行的方法 
/// </summary>
private void ThreadRun()
{
    while (true)
    {
        if (!m_thSwitch)
        {
            Thread l_thThis = Thread.CurrentThread;    //如果m_thSwitch为false，则销毁当前线程
            l_thThis.Abort();
        }
        else
        {
            Random l_ran = new Random();                        //随机数种子
            int[] l_arrX = new int[10000];
            int[] l_arrRedY = new int[10000];
            int[] l_arrBlueY = new int[10000];

            for (int i = 0; i < 10000; i++)                    //组合数据到数组中
            {
                l_arrX[i] = i;
                l_arrRedY[i] = l_ran.Next(400, 900);
                l_arrBlueY[i] = l_ran.Next(100, 500);
            }
            Console.WriteLine("显示前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加显示前系统时间
            axTChartMove.Invoke(new Action(delegate ()                              //通过委托在UI线程绘制图像
                                           {
                                               axTChartMove.Series(0).AddArray(10000, l_arrRedY, l_arrX);             //添加数组数据
                                               axTChartMove.SeriesList.Items[1].AddArray(10000, l_arrBlueY, l_arrX);  //效果和上面相同
                                           }));
            Console.WriteLine("显示后：" + DateTime.Now.ToString("mm:ss:fff ")); //打印数据添加显示后系统时间
        }
    }
}

private bool m_thSwitch = false;                        //用于判断线程是开启还是关闭
/// <summary>
/// 开始Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStart_Click(object sender, EventArgs e)
{
    if (!m_thSwitch)
    {
        ThreadStart l_start = new ThreadStart(ThreadRun);
        Thread l_thAddData = new Thread(l_start);           //创建子线程绘制图表数据
        m_thSwitch = true;
        l_thAddData.Start();                              //线程开始
    }
}
/// <summary>
/// 停止Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStop_Click(object sender, EventArgs e)
{
    m_thSwitch = false;                       //关闭线程
}

返回顶部

5.2.1 不同条件实现效果

• 测试条件1： 同时显示两路数据、每路10000个数据点，共20000个数据点（带端点）。

• 显示前：54:24:196
  显示后：54:24:891
  消耗：695 毫秒
• 显示前：54:24:891
  显示后：54:25:510
  消耗：619 毫秒
• 显示前：54:25:941
  显示后：54:26:513
  消耗：572 毫秒

• **测试条件2：**同时显示两路数据、每路10000个数据点，共20000个数据点（不带端点）。

• 显示前：57:24:433
  显示后：57:24:535
  消耗：102 毫秒
• 显示前：57:24:536
  显示后：57:24:633
  消耗：97 毫秒
• 显示前：57:24:633
  显示后：57:24:732
  消耗：99 毫秒

• **测试条件3：**同时显示两路数据、每路5000个数据点，共10000个数据点（带端点）。

• 显示前：01:10:577
  显示后：01:10:781
  消耗：204 毫秒
• 显示前：01:10:833
  显示后：01:11:080
  消耗：247 毫秒
• 显示前：01:11:080
  显示后：01:11:334
  消耗：254 毫秒

• **测试条件4：**同时显示两路数据、每路5000个数据点，共10000个数据点（不带端点）。

• 显示前：04:53:350
  显示后：04:53:421
  消耗：71 毫秒
• 显示前：04:53:489
  显示后：04:53:558
  消耗：69 毫秒
• 显示前：04:53:558
  显示后：04:53:626
  消耗：68 毫秒

• **测试条件5：**同时显示两路数据、每路1000个数据点，共2000个数据点（ 带端点）。

• 显示前：08:18:860
  显示后：08:18:900
  消耗：40 毫秒
• 显示前：08:18:900
  显示后：08:18:941
  消耗：41 毫秒
• 显示前：08:18:941
  显示后：08:18:981
  消耗：40 毫秒

• **测试条件6：**同时显示两路数据、每路1000个数据点，共2000个数据点（ 不带端点）。

• 显示前：12:26:130
  显示后：12:26:142
  消耗：12 毫秒
• 显示前：12:26:142
  显示后：12:26:155
  消耗：13 毫秒
• 显示前：12:26:155
  显示后：12:26:167
  消耗：12 毫秒

返回顶部

5.2.2 TeeChart8.ocx绘图效率测试结果

• 根据几组测试数据得出以下几点结论：

• 相同数据量下，不带端点比带端点绘制效率高6倍左右。
• TeeChart8.ocx绘图效率与数据量增长呈反比关系。
• 根据20帧左右为肉眼感觉的流畅度，带端点绘制一次大概最多绘制总量2500个数据，不带端点一次大概最多绘制总量8000个数据。

返回顶部

5.3 TeeChart.WPF.dll实现

private void SetChart()
{
    /*******************图表窗体设置********************************/
    chartMove.Aspect.View3D = false;               //控件3D效果
    chartMove.Header.Text = "WPF使用TeeChart.WPF"; //设置窗体标题
    chartMove.Legend.Visible = true;              //图例
    chartMove.Legend.Color = Color.FromRgb(100, 200, 200);   //设置图例背景颜色
    chartMove.Axes.Visible = true;                //是否显示坐标轴
    chartMove.Axes.Left.Title.Text = "Y轴";       //Y轴标题
    chartMove.Axes.Bottom.Title.Text = "X轴";     //X轴标题
    chartMove.Axes.Left.Title.Visible = true;    //坐标轴标题是否可见
    chartMove.Axes.Left.Title.Angle = 0;         //坐标轴标题旋转角度
    chartMove.Axes.Left.Labels.Style = Steema.TeeChart.WPF.AxisLabelStyle.Auto;//Y轴样式
    chartMove.Axes.Left.Labels.Angle = 20;    //坐标轴刻度标签旋转角度
    chartMove.Axes.Bottom.Grid.Visible = true;    //是否显示网格

    /*******************蓝色直线创建并设置*****************************/
    Steema.TeeChart.WPF.Styles.Line l_lineBlue = new Steema.TeeChart.WPF.Styles.Line();   //创建line
    l_lineBlue.Color = Color.FromRgb(0, 0, 200);    //设置线颜色
    l_lineBlue.Title = "直线blue";
    l_lineBlue.Pointer.Visible = false;              //设置开启端点
    chartMove.Series.Add(l_lineBlue);               //line添加进TChart

    /*******************绿色直线创建并设置***************************/
    Steema.TeeChart.WPF.Styles.Line l_lineGreen = new Steema.TeeChart.WPF.Styles.Line();   //创建line
    l_lineGreen.Color = Color.FromRgb(0, 200, 0);    //设置线颜色
    l_lineGreen.Title = "直线green";
    l_lineGreen.Pointer.Visible = false;
    chartMove.Series.Add(l_lineGreen);

    /*******************添加鼠标监听，标记提示*************************/
    Steema.TeeChart.WPF.Tools.MarksTip l_marks = new Steema.TeeChart.WPF.Tools.MarksTip();
    l_marks.Style = Steema.TeeChart.WPF.Styles.MarksStyles.XY;    //设置提示信息样式
    l_marks.MouseAction = Steema.TeeChart.WPF.Tools.MarksTipMouseAction.Click;       //设置触发响应方式
    chartMove.Tools.Add(l_marks);
}

/// <summary>
/// 子线程执行的方法 
/// </summary>
private void ThreadRun()
{
    while (true)
    {
        if (!m_thSwitch)
        {
            Thread l_thThis = Thread.CurrentThread;    //如果m_thSwitch为false，则销毁当前线程
            l_thThis.Abort();
        }
        else
        {
            //第二种添加方式，添加数组
            Random l_ran = new Random();                          //随机数种子
            int[] l_arrX = new int[1250];
            int[] l_arrBlueY = new int[1250];
            int[] l_arrGreenY = new int[1250];
            for (int i = 0; i < 1250; i++)
            {
                l_arrX[i] = i;
                l_arrBlueY[i] = l_ran.Next(100, 500);
                l_arrGreenY[i] = l_ran.Next(400, 900);
            }
            Console.WriteLine("显示前：" + DateTime.Now.ToString("mm:ss:fff"));  //打印数据添加显示前系统时间
            chartMove.Dispatcher.Invoke(new Action(delegate ()                    //通过委托在UI线程绘制图像
                                                   {
                                                       chartMove.Series[0].Add(l_arrX, l_arrBlueY);       //添加数组数据
                                                       chartMove.Series[1].Add(l_arrX, l_arrGreenY);
                                                   }));
            Console.WriteLine("显示后：" + DateTime.Now.ToString("mm:ss:fff "));  //打印数据添加显示后系统时间    
        }
    }
}

private bool m_thSwitch = false;                        //用于判断线程是开启还是关闭

/// <summary>
/// 开始Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStart_Click(object sender, EventArgs e)
{
    if (!m_thSwitch)
    {
        ThreadStart l_start = new ThreadStart(ThreadRun);
        Thread l_thAddData = new Thread(l_start);           //创建子线程绘制图表数据
        m_thSwitch = true;
        l_thAddData.Start();                              //线程开始
    }
}
/// <summary>
/// 停止Button
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonStop_Click(object sender, EventArgs e)
{
    m_thSwitch = false;                       //关闭线程
}

返回顶部

5.3.1 不同条件实现效果

• 测试条件1： 同时显示两路数据、每路10000个数据点，共20000个数据点（带端点）。

• 显示前：47:34:611
  显示后：47:35:546
  935 毫秒
• 显示前：49:30:041
  显示后：49:30:995
  954 毫秒
• 显示前：49:30:996
  显示后：49:31:974
  978 毫秒
• 显示前：57:28:732 (绘制失败)
  显示后：57:28:733
  消耗：1 毫秒

• 测试条件2： 同时显示两路数据、每路10000个数据点，共20000个数据点（不带端点）。

• 显示前：32:29:988
  显示后：32:30:249
  消耗：261 毫秒
• 显示前：32:30:536
  显示后：32:30:788
  消耗：252 毫秒
• 显示前：32:30:789
  显示后：32:31:043
  消耗：254 毫秒
• 显示后：32:31:043 （绘制失败）
  显示前：32:31:043
  消耗：0 毫秒

• 测试条件3： 同时显示两路数据、每路5000个数据点，共10000个数据点（带端点）。

• 显示前：36:19:108
  显示后：36:19:501
  消耗：393 毫秒
• 显示前：36:19:857
  显示后：36:20:250
  消耗：393 毫秒
• 显示前：36:20:252
  显示后：36:20:650
  消耗：398 毫秒
• 显示前：36:20:650 （绘制失败）
  显示后：36:20:651
  消耗：1 毫秒

• 测试条件4： 同时显示两路数据、每路5000个数据点，共10000个数据点（不带端点）。

• 显示前：39:57:782
  显示后：39:57:940
  消耗：158 毫秒
• 显示前：39:57:941
  显示后：39:58:103
  消耗：162 毫秒
• 显示前：39:58:464
  显示后：39:58:629
  消耗：165 毫秒
• 显示后：39:59:123 (绘制失败)
  显示前：39:59:124
  消耗：1 毫秒

• 测试条件5： 同时显示两路数据、每路1000个数据点，共2000个数据点（带端点）。

• 显示前：44:01:284
  显示后：44:01:357
  消耗：73 毫秒
• 显示前：44:01:475
  显示后：44:01:553
  消耗：78 毫秒
• 显示前：44:01:650
  显示后：44:01:726
  消耗：76 毫秒
• 显示前：44:01:812 （绘制失败）
  显示后：44:01:813
  消耗：1 毫秒

• 测试条件6： 同时显示两路数据、每路1000个数据点，共2000个数据点（不带端点）。

• 显示前：47:53:530
  显示后：47:53:570
  消耗：40 毫秒
• 显示前：47:53:570
  显示后：47:53:610
  消耗：40 毫秒
• 显示前：47:53:611
  显示后：47:53:652
  消耗：41 毫秒
• 显示前：47:53:734 （绘制失败）
  显示后：47:53:734
  消耗：0 毫秒

返回顶部

5.3.2 TeeChart.WPF.dll绘图效率测试结果

• 根据几组测试数据得出以下几点结论：

• 相同数据量下，不带端点比带端点绘制效率高2-3倍左右。
• TeeChart.WPF.dll带端点绘图效率与数据量增长反比关系，不带端点绘图效率与数据量增加呈正比关系。
• 根据20帧左右为肉眼感觉的流畅度，带端点绘制一次大概最多绘制总量1500个数据，不带端点一次大概最多绘制总量2500个数据。
• 大概率出现某一组数据绘制失败的情况，且与数据量无关。

返回顶部

6、Add-数据添加函数解析

• 概述： add函数无论是 public int Add(double x, double y) 还是 public void Add(Array xValues, Array yValues) 都是异步执行函数，并不参与图表数据的绘制。
• 步骤：

• 使用ILSpy反编译工具打开编译后的可执行文件，找到使用到添加数据的函数。
• 点击Add，找到函数实现位置。

• 可以看出，前面if中都是在将数组数据添加给控件，最后调用Invalidate()函数，此函数的主要功能是使控件的特定区域无效并向控件发送绘制消息。也就是说Invalidate函数只发出重绘界面的消息，不参与绘制控件，在消息发送完后就返回，Add函数就结束了。

• 从下列函数可看出，以点的方式添加数据每添加一个点就执行一次**Invalidate()**函数，所以添加效率会远低于数组添加方式。