1. 新建一个或者打开现有的 ASP.NET Web 应用程序 (Visual Studio 2005、2008 或 2010)。

2. 从 DX.10.2: Data 工具箱标签页中，把 WebChartControl 控件拖放到窗体上。

   

   注意，在放落图表之后，图表向导 可能会被调用 (如果启用了向导的“Display a wizard every time a new chart is added[当添加新图表时显示向导]”选项)。 在本例中，我们不需要使用向导，因此单击 取消(Cancel) 按钮来关闭向导窗口。

3. 在本例中，nwind.mdb 数据库文件 (与 XtraCharts 套件的安装一起提供) 位于应用程序的 App_Data 目录。

   

4. 单击图表的智能标记，来调用其操作列表。 然后打开 Choose Data Source(选择数据源) 项的下拉列表， 并单击 <New data source(新建数据源)...> 链接。

   

5. Data Source Configuration Wizard(数据源配置向导) 将出现。 选择 Access Database 类型并单击 OK 按钮。

   

6. 在向导的下一个页面中，单击 Browse(浏览)... 按钮，以便于指定数据库。

   在 Select Microsoft Access Database(选择 Microsoft Access 数据库) 窗口中选中 nwind.mdb 文件，并单击 OK 按钮 (关闭窗口)，然后单击向导的 Next(下一步) 按钮。

   

7. 在接下来的页面中，勾选数据库中的 Products 表，并且单击 Next(下一步) 按钮。

   

8. 在向导的最后一个页面上，可以通过单击 Test Query(测试查询) 按钮来测试数据库连接。

   为了完成数据源创建，单击 完成(Finish) 按钮。

现在，AccessDataSource1 对象被指派到图表。 接下来的步骤将指定哪些数据字段被用于为图表系列提供数据。

9. 现在，我们把 系列 添加到图表。 要这样做，则单击图表的智能标记，并在操作列表中单击 Series(系列)... 链接。

   

10. 在被调用的 Series Collection Editor(系列集合编辑器) 中，单击 Add(添加)... 按钮，并且选择 Bar(条形) 视图。

11. 现在，切换到编辑器窗口右侧的 属性 标签页，并且为 Series1 的属性指派下列值：

    

    - 把 SeriesBase.ArgumentDataMember 属性设置为 ProductName 数据字段；

    - 把 SeriesBase.ValueDataMembers 属性的唯一值设置为 UnitPrice。

12. 为了限制系列中的数据点的数目，单击 SeriesBase.DataFilters 属性的省略号按钮。

    在被调用的 Data Filter Collection Editor(数据筛选集合编辑器) 中，单击 Add(添加) 按钮，并且把所创建的筛选标准的 DataFilter.ColumnName 属性设置为 CategoryID、DataFilter.Value 属性设置为 4 。 然后把 DataFilter.Condition 属性设置为其默认值 (Equal)。

    

13. 如果需要在设计时刻查看形成的图表的最终外观，则单击它的智能标记，并在操作列表中单击 Populate(填充) 项。 这样，将使用获取的数据重绘图表。

    

14. 现在，可以调整下列选项。

    调整 X-轴标签。
    要防止过长的轴标签产生重叠，则选中图表，并且在 属性 窗口中，展开它的 WebChartControl.Diagram 属性。 然后，在 XYDiagram.AxisX 属性中，展开 Axis2D.Label 属性，并把 AxisLabel.Angle 属性设置为 -35，同时启用 AxisLabelItemBase.Antialiasing 属性。 或者，也可以使用 AxisLabel.Staggered 属性。

    调整 系列-视图-特性选项。
    对于所创建的系列，可以分别为每个条形着色。 要完成此任务，则通过图表的智能标记，调用 Series Collection Editor(系列集合编辑器)，并切换到此对话框的 属性 标签页。 然后，展开 SeriesBase.View 属性，并启用 SeriesViewColorEachSupportBase.ColorEach 属性。

    然后，对于此系列，展开它的 SeriesBase.LegendPointOptions 属性，并把 PointOptions.PointView 属性设置为 ArgumentAndValues。

    调整 图例。
    现在，每个数据点都被表示为图表图例中的单个项，并显示了点参数和点取值对。 要更好地设置图例的位置，则在 属性 窗口中，展开 ChartControl.Legend 属性，并把它的 Legend.Direction 属性设置为 LeftToRight、Legend.AlignmentHorizontal 属性设置为 Center、Legend.AlignmentVertical 属性设置为 BottomOutside。

    添加 图表标题。
    要创建图表标题，则在 属性 窗口中，单击 ChartControl.Titles 属性的省略号按钮。 然后，在被调用的集合编辑器中，单击 Add(添加) 按钮，并且设置所创建标题的 Title.Text 和其他选项。

    调整 系列点标签。
    要隐藏系列标签，则禁用 SeriesLabelBase.Visible 属性。 或者，可以通过 SeriesLabelBase.ResolveOverlappingMode 属性来启用系列标签的自动冲突检测和解决。

    创建附加的元素。
    可以为图表启用许多特殊元素，例如 批注、趋势线、数值带、回归线 和 斐波那契指标线。 要为大量数据产生清晰的表示形式，则可以启用对数轴刻度 (通过 AxisBase.Logarithmic 属性)，启用刻度分隔线 (通过 Axis.ScaleBreaks 属性)，以及提供 缩放和滚动 功能。

    改变图表的外观。
    要为系列点指定颜色，则使用 ChartControl.PaletteBaseColorNumber、ChartControl.PaletteName 和 ChartControl.AppearanceName 属性。 要获得更多相关信息，请参阅 外观定制。

在下面的插图中显示了结果。