[置顶] [MSCHART]Stacked与多组柱状图
1.通常会按区域或者产品分月显示百分比的效果图：
![[置顶] [MSCHART]Stacked与多组柱状图_第1张图片](http://img.e-com-net.com/image/info5/aeaa019dd7274b5db7510d5b29bfc63b.jpg)
后台代码：
private void Stacked(DataTable dt)
{
this.Chart2.Width = 540;
this.Chart2.Height = 350;
DataTable mdt = new DataTable();
mdt = DataTableConvert.Transpose(dt,"区间");// DataTableUpdated(dt);
this.Chart2.DataSource = mdt;
this.Chart2.DataBind();
this.Chart2.Series["Series1"].ChartType = SeriesChartType.Column;
this.Chart2.Series["Series1"].XValueMember = "区间";
this.Chart2.Series["Series1"].YValueMembers = "NAZ Subtotal";
this.Chart2.Series["Series2"].XValueMember = "区间";
this.Chart2.Series["Series2"].YValueMembers = "渠道 ";
this.Chart2.Series["Series3"].XValueMember = "区间";
this.Chart2.Series["Series3"].YValueMembers = "国内-厦门";
this.Chart2.Series["Series4"].XValueMember = "区间";
this.Chart2.Series["Series4"].YValueMembers = "国内-广东";
this.Chart2.Series["Series5"].XValueMember = "区间";
this.Chart2.Series["Series5"].YValueMembers = "国内-上海";
this.Chart2.Series["Series6"].XValueMember = "区间";
this.Chart2.Series["Series6"].YValueMembers = "AZ Subtotal";
string chartTypeName = "StackedColumn100";
Chart2.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series2"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series3"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series4"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series5"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series6"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart2.Series["Series1"].IsValueShownAsLabel = true;
Chart2.Series["Series2"].IsValueShownAsLabel = true;
Chart2.Series["Series3"].IsValueShownAsLabel = true;
Chart2.Series["Series4"].IsValueShownAsLabel = true;
Chart2.Series["Series5"].IsValueShownAsLabel = true;
Chart2.Series["Series6"].IsValueShownAsLabel = true;
//显示类别
Chart2.Legends[0].Enabled = true;
Chart2.Series["Series1"].LegendText = dt.Rows[0][0].ToString();
Chart2.Series["Series2"].LegendText = dt.Rows[1][0].ToString();
Chart2.Series["Series3"].LegendText = dt.Rows[2][0].ToString();
Chart2.Series["Series4"].LegendText = dt.Rows[3][0].ToString();
Chart2.Series["Series5"].LegendText = dt.Rows[4][0].ToString();
Chart2.Series["Series6"].LegendText =dt.Rows[5][0].ToString ();
//X轴的数值间隔
Chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1;
Chart2.ChartAreas["ChartArea1"].AxisX.Title = "月份";
}
二.分组柱状图呢？
![[置顶] [MSCHART]Stacked与多组柱状图_第2张图片](http://img.e-com-net.com/image/info5/d1580a9e27704437b6e42fb78189c5fd.jpg)
后台代码：
private void MutiColumn(DataTable dt)
{
this.ChartYear.Width = 540;
this.ChartYear.Height = 350;
this.ChartYear.DataSource = dt;
this.ChartYear.DataBind();
this.ChartYear.Series["Series1"].ChartType = SeriesChartType.Column;
this.ChartYear.Series["Series1"].XValueMember = "区间";
this.ChartYear.Series["Series1"].YValueMembers = "NAZ Subtotal";
this.ChartYear.Series["Series2"].XValueMember = "区间";
this.ChartYear.Series["Series2"].YValueMembers = "渠道 ";
this.ChartYear.Series["Series3"].XValueMember = "区间";
this.ChartYear.Series["Series3"].YValueMembers = "国内-厦门";
this.ChartYear.Series["Series4"].XValueMember = "区间";
this.ChartYear.Series["Series4"].YValueMembers = "国内-广东";
this.ChartYear.Series["Series5"].XValueMember = "区间";
this.ChartYear.Series["Series5"].YValueMembers = "国内-上海";
this.ChartYear.Series["Series6"].XValueMember = "区间";
this.ChartYear.Series["Series6"].YValueMembers = "AZ Subtotal";
//显示数据
//ChartYear.Series["Series1"].IsValueShownAsLabel = true;
//this.ChartYear.ChartAreas["ChartArea1"].AxisX.Title = "产品类型";
this.ChartYear.ChartAreas["ChartArea1"].AxisY.Title = "销售金额";
//显示类别
ChartYear.Legends[0].Enabled = true;
ChartYear.Series["Series1"].LegendText = mydt.Rows[0][0].ToString();
ChartYear.Series["Series2"].LegendText = mydt.Rows[1][0].ToString();
ChartYear.Series["Series3"].LegendText = mydt.Rows[2][0].ToString();
ChartYear.Series["Series4"].LegendText = mydt.Rows[3][0].ToString ();
ChartYear.Series["Series5"].LegendText = mydt.Rows[4][0].ToString();
ChartYear.Series["Series6"].LegendText = mydt.Rows[5][0].ToString();
//背景色设置
this.ChartYear.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
this.ChartYear.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(209, 237, 254); //该处设置为了由天蓝到白色的逐渐变化
this.ChartYear.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
this.ChartYear.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
//中间X,Y线条的颜色设置
this.ChartYear.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
this.ChartYear.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
//X.Y轴数据显示间隔
ChartYear.ChartAreas["ChartArea1"].AxisX.Interval = 1;
}
HTML:
<asp:CHART id="Chart2" runat="server" Height="400px" Width="500px" BackColor="#D3DFF0" Palette="BrightPastel" BorderDashStyle="Solid" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="26, 59, 105">
<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 TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Enabled="False" Name="Default"></asp:Legend>
</legends>
<borderskin SkinStyle="Emboss"></borderskin>
<series>
<asp:Series Name="Series1" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240"></asp:Series>
<asp:Series Name="Series2" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 252, 180, 65"></asp:Series>
<asp:Series Name="Series3" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 224, 64, 10"></asp:Series>
<asp:Series Name="Series4" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 5, 100, 146"></asp:Series>
<asp:Series Name="Series5" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240"></asp:Series>
<asp:Series Name="Series6" ChartType="StackedColumn" BorderColor="180, 26, 59, 105" Color="220, 252, 180, 65"></asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
<area3dstyle Rotation="10" Inclination="15" WallWidth="0" />
<position Y="3" Height="85" Width="92" X="2"></position>
<axisy LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="8">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
<axisx LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="8">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
</asp:ChartArea>
</chartareas>
</asp:CHART>
<asp:Chart ID="ChartYear" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="AliceBlue" EnableTheming="False"
EnableViewState="True">
<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" >
</asp:Series>
<asp:Series Name="Series2" >
</asp:Series>
<asp:Series Name="Series3" >
</asp:Series>
<asp:Series Name="Series4" >
</asp:Series>
<asp:Series Name="Series5" >
</asp:Series>
<asp:Series Name="Series6" >
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>