Devexpress 12.2.8.0 部分学习笔记1 WebChartControl

本随笔大部分摘自《http://documentation.devexpress.com》devexpress官方文档和demo

主要学的是ASP.net 控件和MVC扩展

　　里的asp.net wenForm 控件

　　

【Chart Control】WebChartControl控件

　　1.支持的浏览器有

  谷歌Chrome（版本1.0和更高版本）

  IE浏览器（6.0以上版本）

  网景公司（版本7.2 +和更高）

  Mozilla的

  Mozilla的火狐（1.5和更高版本）

  歌剧院（第8版和更高版本）

  Safari浏览器

　　2.添加一个Web图表

　　直接在工具栏中拖一个WebChartControl控件到页面，然后可以run wazrid运行向导，改变图表的外观什么的

　　3.如何一个WebChartControl可以被添加到ASPxCallbackPanel在其回调。

添加一个webchartcontrol控件
然后，点击按钮的智能标签。在调用的行动清单，禁用的AutoPostBack属性，然后单击客户端事件...链接。 在调用对话框中，从客户端的点击事件处理程序，调用PerformCallback的（）回调面板的。
现在，从DX.13.1：导航和布局工具箱“选项卡上，一个ASPxCallbackPanel拖放到页面上。
using System; using DevExpress.XtraCharts; using DevExpress.XtraCharts.Web; using DevExpress.Web.ASPxClasses; using DevExpress.Web.ASPxCallbackPanel; // ...  protected void ASPxCallbackPanel1_Callback(object sender, CallbackEventArgsBase e) { WebChartControl wbc = new WebChartControl(); wbc.Series.Add(new Series("Series", ViewType.Line)); wbc.Series[0].ArgumentScaleType = ScaleType.DateTime; wbc.Series[0].ValueScaleType = ScaleType.Numerical; Random r = new Random(); for (int i = 0; i < 5; i++) { wbc.Series[0].Points.Add(new SeriesPoint(DateTime.Today.AddDays(i), ((int)((r.NextDouble() * 100) * 10)) / 10.0)); } wbc.Width = ((ASPxCallbackPanel)sender).Width; ((ASPxCallbackPanel)sender).Controls.Add(wbc); }

　　

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5.绑定数据到图表

using System;
using DevExpress.XtraCharts;
// ...

namespace WebChartDataBinding {
    public partial class _Default : System.Web.UI.Page {

        protected void Button1_Click(object sender, EventArgs e) {
            WebChartControl1.DataSourceID = "AccessDataSource1";
            WebChartControl1.SeriesDataMember = "Year";
            WebChartControl1.SeriesTemplate.ArgumentDataMember = "Region";
            WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] {"GSP"});
            WebChartControl1.SeriesTemplate.View = new SideBySideBarSeriesView();
            WebChartControl1.DataBind();
        }
    }

}

6.绑定数据到pivotgridview

1. Create a new ASP.NET Web Application (Visual Studio 2008 or 2010), or open an existing one.

2. Drop the ASPxPivotGrid control from the DX.13.1: Data Toolbox tab onto the Web page.

   

3. To bind the pivot grid to a data base, click its smart tag, and in the invoked actions list, expand the drop-down menu for the Choose Data Source entry.

   And, click New data source... link.

   

4. Then, proceed with the steps of the Data Source Configuration Wizard, to connect to your data source. In this example, we'll use the gsp.mdb file (which is shipped with the installation of the XtraCharts suite), copied to the application's folder.

   

5. After you've connected to a data source, click the pivot grid's smart tag again, and in its actions list, choose Fields.

   

6. In the invoked dialog, click Retrieve fields, and among the obtained fields, remove the IDfield, since it is unnecessary in this project.

   

7. Then, for each field, specify its Area property. In particular:

   - for the Region field, set this property to ColumnArea;

   - for the Year field, set this property to RowArea;

   - and, for the GSP field, set this property to DataArea.

   

   To close the dialog, and apply the changes, click OK.

8. To avoid grand totals shown in both the grid and chart, you can switch them off, via thePivotGridOptionsChartDataSourceBase.ProvideColumnGrandTotals andPivotGridOptionsChartDataSourceBase.ProvideRowGrandTotals properties.

   

Now, the pivot grid has been successfully bound to data, and it's only left to create a Web chart bound to this grid. This is explained in the next section of this tutorial.

 

Bind a Chart to the Pivot Grid

 

 

 

9. Add a chart to the Web page.

10. Then, click its smart tag, and in the invoked actions list, expand the Choose Data Sourcedrop-down menu, and select the ASPxPivotGrid1.

    

11. In the Properties window, specify the following properties of the chart's series template.

    - set the WebChartControl.SeriesDataMember property to Series;

    - the SeriesBase.ArgumentDataMember property to Arguments;

    - and, the SeriesBase.ValueDataMembers property to Values.

    

12. Then, you can adjust other chart's options, e.g. disable its series labels.

 

Get the Result

 

 

 

The WebChartControl has now successfully bound to the ASPxPivotGrid. Run the application, and view the result.