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. 在本例中，gsp.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 数据库) 窗口中选中 gsp.mdb 文件，并单击 OK 按钮 (关闭窗口)，然后单击向导的 Next(下一步) 按钮。

   

7. 在接下来的页面上，勾选 * 字段，从而选中数据库表中的所有字段，然后单击 Next(下一步) 按钮。

   

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

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

现在，AccessDataSource1 对象被指派到图表。

因为在本例中，图表将把数据呈现为不同的系列、系列点及其取值，因此使用公共系列模板创建所有系列。 下列的步骤展示了如何完成此任务。

9. 为了指定提供系列名称数据的数据字段，需要设置 WebChartControl.SeriesDataMember 属性。 把此属性设置为 Year。

   

10. 然后，需要调整系列模板，通过图表的 WebChartControl.SeriesTemplate 属性来访问系列模板。 把 SeriesBase.ArgumentDataMember 属性设置为 Region。

    

11. 然后，把 SeriesBase.ValueDataMembers 集合中的唯一成员的取值，设置为 GSP。

    

12. 调整系列名称模板

    在默认情况下，由图表使用其 WebChartControl.SeriesDataMember 属性值自动生成的每个系列的名称，都直接从绑定数据源中适当的数据字段中获取。 但是，也可能需要添加一些前缀或后缀到这些名称。 因此，可以定制 SeriesNameTemplate 对象 (由 WebChartControl.SeriesNameTemplate 属性返回)，从而把一些文本添加到每个系列名称的开头或结尾。 例如，把 SeriesNameTemplate.BeginText 属性设置为 "GSP in "。

13. 定制系列标签

    把 SeriesTemplate.Label.Visible 属性设置为 False 来隐藏所有系列点的标签，并防止图表被众多的重叠标签塞满。

14. 定制轴标签

    最初，所有轴标签 (在本例中显示 US 地区名称) 都被排列起来并且重叠，那样图表的外观就不专业。 要避免此问题，则选中 X-轴 (也可通过 WebChartControl.Diagram.AxisX 属性访问)，并把它的 Label.Staggered 属性设置为 True。

如有需要，还可以定制图表的其他许多属性，此处不再赘述。

在下面的插图中显示了形成的 Web 图表。