MsChart<5> 累计柱状图 分类统计

先上图，最终效果图如下： 统计某一项的结果，而结果又分为三个等级，要分别统计.

-------------------------------------HTML---------------------------------------------------

<asp:Chart ID="Chart1" runat="server" Height="576px" Width="768px" BackColor="#D3DFF0" Palette="BrightPastel" BorderlineDashStyle="Solid" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="26, 59, 105">
   <Legends>
        <asp:Legend TitleFont="Verdana, 11px" BackColor="Transparent" Font="Verdana, 12px" IsTextAutoFit="True" Name="Default" Docking="Top">
        </asp:Legend>
    </Legends>
    <BorderSkin SkinStyle="Emboss"></BorderSkin>
    <Series>
         <asp:Series Name="Series1" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 5, 100, 146">
          <%--Color="220, 65, 140, 240--%>
</asp:Series>
         <asp:Series Name="Series2" ChartType="StackedArea" BorderColor="180, 26, 59, 105" Color="220, 252, 180, 65">
         </asp:Series>
         <asp:Series Name="Series3" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 224, 64, 10">
         </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="92" Width="92" X="2"></Position>--%>
                <AxisY LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="10">
                    <LabelStyle Font="Verdana,10px" />
                     <MajorGrid LineColor="64, 64, 64, 64" />
                 </AxisY>
                 <AxisX LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="11" Interval="1">
                     <LabelStyle Font="Verdana,11px" />
                     <MajorGrid LineColor="64, 64, 64, 64" Interval="1" />
                 </AxisX>
           </asp:ChartArea>
       </ChartAreas>
</asp:Chart>

 

后台代码： 其中注释掉的部分是自定义随机数据生成这个图形。 MsChart官网有提供例子。

其中，下面这句代码是去掉值为零的情况。有时候太多的零值影响视觉效果，很丑。

if (dt1.Rows[i][j].ToString() == "0")
{
     dt1.Rows[i][j] = DBNull.Value;
}

 

 

 

 

----------------------------------Source Code----------------------------------------------

        private void BindChart()
        {
            ResultBLL resultBLL = new ResultBLL();
            DataTable dt1 = new DataTable();
            dt1 = resultBLL.GetNumRank(9);

            // Populate series data
            //Random random = new Random();
            //for (int pointIndex = 0; pointIndex < 10; pointIndex++)
            //{
            //    Chart1.Series["Series1"].Points.AddY(Math.Round((double)random.Next(0, 95), 0));
            //    Chart1.Series["Series2"].Points.AddY(Math.Round((double)random.Next(0, 75), 0));
            //    Chart1.Series["Series3"].Points.AddY(Math.Round((double)random.Next(0, 95), 0));
            //}

            if (dt1.Rows.Count > 0)
            {
                for (int i = 0; i < dt1.Rows.Count; i++)
                {
                    for (int j = 0; j < dt1.Columns.Count; j++)
                    {
                        if (dt1.Rows[i][j].ToString() == "0")
                        {
                            dt1.Rows[i][j] = DBNull.Value;
                        }
                    }
                    //Chart1.Series["Series1"].Points.AddXY(dt1.Rows[i]["Category"].ToString(), dt1.Rows[i]["A"].ToString());
                    //Chart1.Series["Series2"].Points.AddXY(dt1.Rows[i]["Category"].ToString(), dt1.Rows[i]["B"].ToString());
                    //Chart1.Series["Series3"].Points.AddXY(dt1.Rows[i]["Category"].ToString(), dt1.Rows[i]["C"].ToString());
                    Chart1.Series["Series1"].Points.DataBind(dt1.DefaultView, "Category", "A", "LegendText=Category,YValues=A,ToolTip=A");
                    Chart1.Series["Series2"].Points.DataBind(dt1.DefaultView, "Category", "B", "LegendText=Category,YValues=B,ToolTip=B");
                    Chart1.Series["Series3"].Points.DataBind(dt1.DefaultView, "Category", "C", "LegendText=Category,YValues=C,ToolTip=C");
                }



                Chart1.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), "StackedColumn", true);
                Chart1.Series["Series2"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), "StackedColumn", true);
                Chart1.Series["Series3"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), "StackedColumn", true);

                Chart1.Series["Series1"].IsValueShownAsLabel = true;
                Chart1.Series["Series2"].IsValueShownAsLabel = true;
                Chart1.Series["Series3"].IsValueShownAsLabel = true;

                Chart1.Series["Series1"].Name = "Rank A";
                Chart1.Series["Series2"].Name = "Rank B";
                Chart1.Series["Series3"].Name = "Rank C";

                Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

                foreach (Series series in Chart1.Series)
                {
                    series["StackedGroupName"] = "";
                }

                Chart1.ResetAutoValues();
            }
        }

        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {

        }
        #endregion

 随机数据生成的图表：