Ext.Net 1.x_Ext.Net.Panel组合MSCHART
注意：
AJAX控件添加MS控件 <Content>.....</Content>
<form id="form1" runat="server">
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server" Height="700" Title="产品季度销售分布">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Content>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
RepeatDirection="Horizontal" Width="200px">
<asp:ListItem Selected="True" Value="ZE">电子公司</asp:ListItem>
<asp:ListItem Value="ZM">磁电公司</asp:ListItem>
</asp:RadioButtonList>
</Content>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel2" runat="server" Height="320" Border="false">
<Items>
<ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Panel4" runat="server" Title="第一季度">
<Content>
<asp:Chart ID="ChartQ1" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="AliceBlue" EnableTheming="False"
EnableViewState="True" Width ="400">
<Titles>
<%-- <asp:Title Font="微软雅黑, 16pt" Text="本月业务员出货饼图" Alignment="TopCenter"></asp:Title>--%>
<asp:Title Docking="Bottom" Font="Trebuchet MS, 8.25pt"
Text="Zettlercn Corporation" Alignment="MiddleRight"></asp:Title>
</Titles>
<legends>
<asp:Legend BackColor="Transparent" Alignment="Center" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Name="Default" LegendStyle="Row"></asp:Legend>
</legends>
<Series>
<asp:Series Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" >
</asp:Series>
</Series>
<ChartAreas >
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="Transparent" ShadowColor="Transparent" BorderWidth="0" >
<area3dstyle Rotation="0" />
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Panel5" runat="server" Title="第二季度" >
<Content>
<asp:Chart ID="ChartQ2" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="AliceBlue" EnableTheming="False"
EnableViewState="True" Width ="400">
<Titles>
<%-- <asp:Title Font="微软雅黑, 16pt" Text="本月业务员出货饼图" Alignment="TopCenter"></asp:Title>--%>
<asp:Title Docking="Bottom" Font="Trebuchet MS, 8.25pt"
Text="Zettlercn Corporation" Alignment="MiddleRight"></asp:Title>
</Titles>
<legends>
<asp:Legend BackColor="Transparent" Alignment="Center" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Name="Default" LegendStyle="Row"></asp:Legend>
</legends>
<Series>
<asp:Series Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" >
</asp:Series>
</Series>
<ChartAreas >
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="Transparent" ShadowColor="Transparent" BorderWidth="0" >
<area3dstyle Rotation="0" />
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</Content>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Height="320" Border="false">
<Items>
<ext:ColumnLayout ID="ColumnLayout2" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Panel6" runat="server" Title="第三季度" >
<Content>
<asp:Chart ID="ChartQ3" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="AliceBlue" EnableTheming="False"
EnableViewState="True" Width ="400">
<Titles>
<%-- <asp:Title Font="微软雅黑, 16pt" Text="本月业务员出货饼图" Alignment="TopCenter"></asp:Title>--%>
<asp:Title Docking="Bottom" Font="Trebuchet MS, 8.25pt"
Text="Zettlercn Corporation" Alignment="MiddleRight"></asp:Title>
</Titles>
<legends>
<asp:Legend BackColor="Transparent" Alignment="Center" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Name="Default" LegendStyle="Row"></asp:Legend>
</legends>
<Series>
<asp:Series Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" >
</asp:Series>
</Series>
<ChartAreas >
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="Transparent" ShadowColor="Transparent" BorderWidth="0" >
<area3dstyle Rotation="0" />
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Panel7" runat="server" Title="第四季度" >
<Content>
<asp:Chart ID="ChartQ4" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="AliceBlue" EnableTheming="False"
EnableViewState="True" Width ="400">
<Titles>
<%-- <asp:Title Font="微软雅黑, 16pt" Text="本月业务员出货饼图" Alignment="TopCenter"></asp:Title>--%>
<asp:Title Docking="Bottom" Font="Trebuchet MS, 8.25pt"
Text="Zettlercn Corporation" Alignment="MiddleRight"></asp:Title>
</Titles>
<legends>
<asp:Legend BackColor="Transparent" Alignment="Center" Docking="Bottom" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Name="Default" LegendStyle="Row"></asp:Legend>
</legends>
<Series>
<asp:Series Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240" >
</asp:Series>
</Series>
<ChartAreas >
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="Transparent" ShadowColor="Transparent" BorderWidth="0" >
<area3dstyle Rotation="0" />
<axisy LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</Content>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
后台：
private void DataChart(Chart ChartQ, int Quarter)
{
ProductByQuarter pq = new ProductByQuarter();
for (int i = 0; i < RadioButtonList1.Items.Count; i++)
{
if (RadioButtonList1.Items[i].Selected)
{
pq.Company = RadioButtonList1.Items[i].Value.Trim();
}
}
pq.Quarter = Quarter;
ProductByQuarterManager pqmgr = new ProductByQuarterManager();
if (pqmgr.ProductByQuarterList(pq).Rows.Count > 0)
{
ChartQ.Series["Series1"].Points.DataBind(pqmgr.ProductByQuarterList(pq).DefaultView, "产品类别", "金额", "");
ChartQ.Width = 400;
ChartQ.Height = 300;
ChartQ.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), "Doughnut", true);
//环形
ChartQ.Series["Series1"]["PieLabelStyle"] = "Outside";
//显示数据
ChartQ.Series["Series1"].IsValueShownAsLabel = true;
//显示百分比
//ChartQ.Series[0].Label = "#VALX #PERCENT{P} #VALY";
ChartQ.Series[0].Label = "#VALX #VALY";
//显示Legends
ChartQ.Legends[0].Enabled = true;
//3D
ChartQ.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
ChartQ.Series[0]["PieDrawingStyle"] = "SoftEdge";
//背景色设置
ChartQ.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
ChartQ.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(209, 237, 254); //该处设置为了由天蓝到白色的逐渐变化
ChartQ.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
ChartQ.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
}
else
{
ChartQ.Visible = false;
}
}
上图: