devexpress 水晶报表控件 实现递归显示

需要，要实现这样的效果，文字苍白，直接用图看效果，







主要效果如上图， 当用户点击中国的柱形时候，显示省份的数据，再点击省份，显示市的数据，

代码如下：

<div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server"
Height="298px" Width="510px" ClientInstanceName="chart" DiagramTypeName="XYDiagram" OnCallbackStateLoad="WebChartControl1_CallbackStateLoad" OnCustomCallback="WebChartControl1_CustomCallback" OnObjectSelected="WebChartControl1_ObjectSelected" SeriesSorting="Ascending" DataSourceID="SqlDataSource1" >
<SeriesSerializable>
<cc1:Series ArgumentDataMember="cn" LabelTypeName="SideBySideBarSeriesLabel" Name="Categories"
PointOptionsTypeName="PointOptions" SeriesViewTypeName="SideBySideBarSeriesView"
ValueDataMembersSerializable="pr">
<label hiddenserializablestring="to be serialized">
<fillstyle filloptionstypename="SolidFillOptions">
<Options HiddenSerializableString="to be serialized"></Options>
</fillstyle>
</label>
<pointoptions hiddenserializablestring="to be serialized"></pointoptions>
<legendpointoptions hiddenserializablestring="to be serialized"></legendpointoptions>
<view hiddenserializablestring="to be serialized"></view>
</cc1:Series>
<cc1:Series LabelTypeName="SideBySideBarSeriesLabel" Name="Products" ArgumentDataMember="cn" ValueDataMembersSerializable="pr" PointOptionsTypeName="PointOptions"
SeriesViewTypeName="SideBySideBarSeriesView" Visible="False" >
<label hiddenserializablestring="to be serialized">
<fillstyle filloptionstypename="SolidFillOptions">
<Options HiddenSerializableString="to be serialized"></Options>
</fillstyle>
</label>
<datafilters>
<cc1:DataFilter DataType="System.Int32" ColumnName="fid"></cc1:DataFilter>
</datafilters>
<pointoptions hiddenserializablestring="to be serialized"></pointoptions>
<legendpointoptions hiddenserializablestring="to be serialized"></legendpointoptions>
<view hiddenserializablestring="to be serialized"></view>
</cc1:Series>
<cc1:Series ArgumentDataMember="cn" LabelTypeName="SideBySideBarSeriesLabel" Name="city"
PointOptionsTypeName="PointOptions" SeriesViewTypeName="SideBySideBarSeriesView"
ValueDataMembersSerializable="pr" Visible="False">
<label hiddenserializablestring="to be serialized">
<fillstyle filloptionstypename="SolidFillOptions">
<Options HiddenSerializableString="to be serialized"></Options>
</fillstyle>
</label>
<datafilters>
<cc1:DataFilter DataType="System.Int32" ColumnName="fid"></cc1:DataFilter>
</datafilters>
<pointoptions hiddenserializablestring="to be serialized"></pointoptions>
<legendpointoptions hiddenserializablestring="to be serialized"></legendpointoptions>
<view hiddenserializablestring="to be serialized"></view>
</cc1:Series>
</SeriesSerializable>

<ClientSideEvents ObjectHotTracked="function(s, e) {
if(e.hitInfo.inSeries)
{
var a=e.hitObject.name;
if(a=='Categories')
{
var hitInCategory = e.hitInfo.inSeries && e.chart.series[0].visible;
var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[0].visible;
s.SetCursor((hitInCategory || hitInBackTitle) ? 'pointer' : 'default');

}
else if(a=='Products')
{
var hitInCategory = e.hitInfo.inSeries && e.chart.series[1].visible;
var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[1].visible;
s.SetCursor((hitInCategory || hitInBackTitle) ? 'pointer' : 'default');

}

}

}" ObjectSelected="function(s, e) {
if(e.hitInfo.inSeries)
{
var a=e.hitObject.name;
if(a=='Categories')
{
var hitInCategory = e.hitInfo.inSeries && e.chart.series[0].visible;
var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[0].visible;

e.processOnServer = hitInCategory || hitInBackTitle;

}
else if(a=='Products')
{
var hitInCategory = e.hitInfo.inSeries && e.chart.series[1].visible;
var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[1].visible;

e.processOnServer = hitInCategory || hitInBackTitle;
}

}

}
" />
<Titles>
<cc1:ChartTitle>
</cc1:ChartTitle>
<cc1:ChartTitle Alignment="Near" Font="Tahoma, 10pt, style=Underline" Text="Back to the main view..."
Visible="False" TextColor="Blue" Antialiasing="False">
</cc1:ChartTitle>
</Titles>
<Legend AlignmentVertical="Center"></Legend>
<SeriesTemplate LabelTypeName="SideBySideBarSeriesLabel" PointOptionsTypeName="PointOptions"
SeriesViewTypeName="SideBySideBarSeriesView" SeriesPointsSorting="Ascending">
<PointOptions HiddenSerializableString="to be serialized">
</PointOptions>
<Label HiddenSerializableString="to be serialized">
<FillStyle FillOptionsTypeName="SolidFillOptions">
<Options HiddenSerializableString="to be serialized" />
</FillStyle>
</Label>
<LegendPointOptions HiddenSerializableString="to be serialized">
</LegendPointOptions>
<View HiddenSerializableString="to be serialized">
</View>
</SeriesTemplate>
<FillStyle FillOptionsTypeName="SolidFillOptions">
<Options HiddenSerializableString="to be serialized" />
</FillStyle>
<Diagram>
<axisy>
<Range SideMarginsEnabled="True"></Range>
</axisy>
<axisx>
<Range SideMarginsEnabled="True"></Range>
</axisx>
</Diagram>
</dxchartsui:WebChartControl>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GYConnectionString %>"
SelectCommand="SELECT * FROM [cpr]"></asp:SqlDataSource>

</div>

后台代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.XtraCharts;
using System.Data.SqlClient;

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

Series CategoriesSeries { get { return WebChartControl1.GetSeriesByName("Categories"); } }
Series ProductsSeries { get { return WebChartControl1.GetSeriesByName("Products"); } }
Series CitySeries { get { return WebChartControl1.GetSeriesByName("city"); } }

bool IsCategoriesChart { get { return CategoriesSeries.Visible; } }
bool IsProductsChart { get { return ProductsSeries.Visible; } }

DataView RetrieveCategories()
{
string selectCommand =
"SELECT * from cpr where fid=0";
using (SqlDataSource dataSource = new SqlDataSource(ConfigurationManager.ConnectionStrings["GYConnectionString"].ConnectionString, selectCommand))
{
dataSource.DataSourceMode = SqlDataSourceMode.DataSet;
return (DataView)dataSource.Select(DataSourceSelectArguments.Empty);
}

}
//DataView RetrieveProducts(string id)
//{
// string selectCommand =
// "SELECT * from cpr where fid="+id;
// SqlConnection conn = new SqlConnection();
// using (SqlDataSource dataSource = new SqlDataSource(ConfigurationManager.ConnectionStrings["GYConnectionString"].ConnectionString, selectCommand))
// {
// dataSource.DataSourceMode = SqlDataSourceMode.DataSet;
// return (DataView)dataSource.Select(DataSourceSelectArguments.Empty);
// }

//}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

}
if (IsCategoriesChart)
{

BindCategories();
InitChartTitle();
}

}
protected void WebChartControl1_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{

}
protected void WebChartControl1_ObjectSelected(object sender, HotTrackEventArgs e)
{
if (IsCategoriesChart)
{
SeriesPoint point = e.AdditionalObject as SeriesPoint;
if (point != null)
InitProductsChart(point);
e.Cancel = point == null;
}
else if (IsProductsChart)
{

SeriesPoint point = e.AdditionalObject as SeriesPoint;
if (point != null)
InitcityChart(point);
e.Cancel = point == null;

}
else if (e.HitInfo.InChartTitle)
InitCategoriesChart();

}
void InitChartTitle()
{
WebChartControl1.Titles[0].Text = "counrty";
}

void InitCategoriesChart()
{
CategoriesSeries.Visible = true;
WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.RightOutside;
WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Center;
WebChartControl1.Titles[0].Visible = true;
WebChartControl1.Titles[1].Visible = false;
BindCategories();
}
void InitcityChart(SeriesPoint point)
{
CategoriesSeries.Visible = false;
//IsCategoriesChart = false;
ProductsSeries.Visible = false;
CitySeries.Visible = true;
CitySeries.DataFilters[0].Value = (int)((DataRowView)point.Tag)["id"];
//= (int)((DataRowView)point.Tag)["id"];

//this.WebChartControl1.DataBind();
CitySeries.LegendText = point.Argument;
AxisXBase axisX = ((XYDiagramSeriesViewBase)ProductsSeries.View).AxisX;
axisX.Label.Angle = 30;
axisX.Label.Antialiasing = true;
AxisYBase axisY = ((XYDiagramSeriesViewBase)ProductsSeries.View).AxisY;

axisY.Title.Visible = true;
WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Left;
WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Top;
WebChartControl1.Titles[0].Visible = false;
WebChartControl1.Titles[1].Visible = true;
}

void InitProductsChart(SeriesPoint point)
{
CategoriesSeries.Visible = false;
//IsCategoriesChart = false;
ProductsSeries.Visible = true;

ProductsSeries.DataFilters[0].Value = (int)((DataRowView)point.Tag)["id"];
//= (int)((DataRowView)point.Tag)["id"];

//this.WebChartControl1.DataBind();
ProductsSeries.LegendText = point.Argument;
AxisXBase axisX = ((XYDiagramSeriesViewBase)ProductsSeries.View).AxisX;
axisX.Label.Angle = 30;
axisX.Label.Antialiasing = true;
AxisYBase axisY = ((XYDiagramSeriesViewBase)ProductsSeries.View).AxisY;

axisY.Title.Visible = true;
WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Left;
WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Top;
WebChartControl1.Titles[0].Visible = false;
WebChartControl1.Titles[1].Visible = true;
}
void BindCategories()
{
DataView categories = RetrieveCategories();
CategoriesSeries.DataSource = categories;

}
protected void WebChartControl1_CallbackStateLoad(object sender, DevExpress.XtraCharts.Web.CallbackStateLoadEventArgs e)
{
if (IsCategoriesChart)
BindCategories();
CitySeries.Visible = false;
}
}