Dundas Chart for .NET是一个具有丰富特色的、得奖的图表组件,专为Windows Forms和ASP.NET开发。开发者能够很容易地实现高级图表,使企业更加有效地管理和分析数据。本章以Windows Forms版本为例,介绍如何实现丰富的图表。
17.1 安装Dundas图表控件
介绍将Dundas图表控件安装到用户的计算机中的步骤,不涉及控件的使用等技术问题。
(1)双击下载的安装文件,如图17.1所示。
(2)单击“Next”按钮,如图17.2所示。
图17.1 安装步骤1 图17.2 安装步骤2
(3)选择同意许可协议才能继续安装,单击“Next”按钮,如图17.3所示。
(4)单击“Next”按钮,如图17.4所示。
图17.3 安装步骤3 图17.4 安装步骤4
(5)选择所需安装的位置,单击“Next”按钮,如图17.5所示。
(6)安装完毕后如图17.6所示。
图17.5 安装步骤5 图17.6 安装步骤6
17.2 创建平面图
典型的平面图如图17.7所示。
图17.7 平面图
Dundas图表控件中提供了一个用于创建图形的向导,可以详细地定制图形各个方面的特性。对于平面图而言,其对应于Dundas控件的类型为Area。
介绍如何实现简单的平面图绘制。
(1)创建一个Windows窗体应用程序,命名为AreaChart。
(2)向窗体中添加一个Dundas Chart Viewer,将弹出窗体如图17.8所示。
图17.8 创建向导
(3)在上方的“Chart Type Groups”下拉列表框中选择Area,如图17.9所示。
图17.9 Area图列表
(4)选择第一项“Area”,单击下方的“Next”按钮,进入“3D”设置,如图17.10所示。
图17.10 3D设置
(5)此处将“3D Enabled”复选框取消,不进行任何3D设置,单击“Next”按钮,如图17.11所示。
图17.11 外观设置
(6)此处可以进行外观的设置,中间“Appearance Sytles”列表中是一些预定义的外观样式,可供选择。单击“Next”按钮,如图17.12所示。
图17.12 数据源
(7)此处可以进行用于绘制图表的数据源的配置,在上方的“Chart Data Source”下拉列表框中选择“New Binding Source”选项,如图17.13所示。
(8)选择“数据库”选项,单击“下一步”按钮,如图17.14所示。
(9)直接选择以前曾经配置过的SQL Server Express数据库,单击“下一步”按钮,如图17.15所示。如果要建立其他连接,可以单击右侧的“新建连接”按钮。
(10)选择保存数据库连接字符串,单击“下一步”按钮,如图17.16所示。
图17.13 数据源配置向导 图17.14 选择数据库
图17.15 选择数据库 图17.16 检索数据库
(11)配置向导已经自动检索出了数据库中的内容,选择需要的数据后单击“完成”按钮。Dundas Chart向导将自动识别出新添加的数据源。跳过向导中的“Error Bars”步骤,进入Axes配置界面,如图17.17所示。
图17.17 配置坐标系
(12)在“Title”中可以设定显示名称,同样也可以设定纵轴的显示名称,设置完毕后单击“Next”按钮,如图17.18所示。
图17.18 配置坐标系
(13)调整图表设置后单击“Next”按钮,如图17.19所示。
图17.19 显示值
(14)选中“Display Point Labels”选项,该选项用于显示每个点的值,其他还有颜色、字体和位置等属性可调。单击“下一步”按钮,如图17.20所示。
设置图表的标题后单击“Finish”按钮,结束配置。
运行程序,效果如图17.21所示。
图17.20 图表标题
图17.21 运行结果
17.3 创建条形图
一个典型的条形图如图17.22所示,一些常见的硬件性能评测软件中经常使用这类图表。在Dundas图表控件中,条形图对应的类型为Bar,即SeriesChartType.Bar。通过设置不同的数据,控件将根据这些数据绘制不同的图形。
介绍如何使用Dundas图表控件创建条形图。
(1)创建条形图的方法有两种,第一种是按照上一节的方法使用向导进行创建。由于这些方法大同小异,从本节开始只介绍第二种方法,即采用代码实现的方法。
(2)创建一个Windows窗体应用程序,命名为BarChart。
(3)添加对DundasWinChart的引用,如图17.23所示。
图17.22 条形图 图17.23 添加引用
(4)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(5)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为条形图
chart.Series["Default"].Type = SeriesChartType.Bar;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.24所示。
图17.24 运行结果
17.4 创建柱状图
常见的柱状图效果如图17.25所示。在Dundas图表控件中,柱状图对应的类型是Column,即SeriesChartType.Column。对图形的绘制也是根据不同的数据产生的。
介绍使用Dundas创建柱状图的方法。
(1)创建一个Windows窗体应用程序,命名为ColumnChart。
(2)添加对DundasWinChart的引用,如图17.26所示。
图17.25 柱状图 图17.26 添加引用
(3)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(4)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为柱状图
chart.Series["Default"].Type = SeriesChartType.Column;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.27所示。
图17.27 运行结果
17.5 创建环状图
常见的环状图效果如图17.28所示。环状图在一些销售、市场方面的展示中经常使用。本节介绍的环状图在Dundas图表控件中用Doughnut表示,即SeriesChartType. Doughnut。Doughnut在英文中是甜甜圈的意思,形象地表示了环状图的样式。
介绍使用Dundas创建环状图的方法。
(1)创建一个Windows窗体应用程序,命名为DoughnutChart。
(2)添加对DundasWinChart的引用,如图17.29所示。
图17.28 环状图 图17.29 添加引用
(3)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(4)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为环状图
chart.Series["Default"].Type = SeriesChartType. Doughnut;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.30所示。
图17.30 运行结果
17.6 创建饼图
常见的饼图效果如图17.31所示。饼图和环状图基本类似,饼图在一些销售、市场方面的展示中也经常使用。本节介绍的饼图在Dundas图表控件中用Pie表示,即SeriesChartType.Pie。Pie在英文中是馅饼的意思,形象地表示了饼图的样式。
介绍使用Dundas创建饼图的方法。
(1)创建一个Windows窗体应用程序,命名为PieChart。
(2)添加对DundasWinChart的引用,如图17.32所示。
图17.31 饼图 图17.32 添加引用
(3)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(4)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为饼图
chart.Series["Default"].Type = SeriesChartType.Pie;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.33所示。
图17.33 运行结果
17.7 创建折线图
常见的折线图效果如图17.34所示。折线图在一些动态变化的数据或时间序列数据的展示中经常使用,折线图在Dundas图表控件中对应Line类型,即SeriesChartType.Line。
介绍使用Dundas创建折线图的方法。
(1)创建一个Windows窗体应用程序,命名为LineChart。
(2)添加对DundasWinChart的引用,如图17.35所示。
图17.34 折线图 图17.35 添加引用
(3)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(4)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为折线图
chart.Series["Default"].Type = SeriesChartType.Line;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.36所示。
图17.36 运行结果
17.8 创建点图
常见的点图效果如图17.37所示。点图在一些离散数据表的表示中经常用到,这类数据一般延续性不明显。点图在Dundas图表控件中对应的类型是Point,即SeriesChartType.Point。
介绍使用Dundas创建点图的方法。
(1)创建一个Windows窗体应用程序,命名为PointChart。
(2)添加对DundasWinChart的引用,如图17.38所示。
图17.37 点图 图17.38 添加引用
(3)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(4)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为点图
chart.Series["Default"].Type = SeriesChartType.Point;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.39所示。
图17.39 运行结果
17.9 创建曲线图
常见的曲线图效果如图17.40所示。曲线图可以用于函数图形的描绘,其两点之间的连线不是直线,而是一条比较平滑的曲线。曲线图在Dundas图表控件中对应的类型是Spline,即SeriesChartType.Spline。
介绍使用Dundas创建曲线图的方法。
(1)添加对DundasWinChart的引用,如图17.41所示。
图17.40 曲线图 图17.41 添加引用
(2)在代码中添加如下引用。
using Dundas.Charting.WinControl;
(3)修改“Form1.cs”的代码如下。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//创建一个Chart类型的变量,表示一幅图
Chart chart = new Chart();
//Series表示图表中的一个系列,这里只添加一幅默认的图表
chart.Series.Add("Default");
//设置该图表的样式为曲线图
chart.Series["Default"].Type = SeriesChartType.Spline;
//为其添加数据
chart.Series["Default"].Points.Add(15);
chart.Series["Default"].Points.Add(8);
chart.Series["Default"].Points.Add(14);
chart.Series["Default"].Points.Add(9);
chart.Series["Default"].Points.Add(16);
chart.Series["Default"].Points.Add(12);
//ChartAreas表示图表显示的区域,添加一个默认的区域
chart.ChartAreas.Add("Default");
//将默认图表的显示区域设定为新添加的显示区域
chart.Series["Default"].ChartArea ="Default";
//定义图片控件的窗体填充方式
chart.Dock = DockStyle.Fill;
//向窗体中添加该控件
Controls.Add(chart);
}
}
运行程序,结果如图17.42所示。
图17.42 运行结果