MSChart的初步使用和学习

最近做项目使用了MSChart控件，对其进行了一些操作和使用，现在将使用之中的相关纪录在此处，以备后用。

以上是前端的代码，以下是显示效果(没有数据)：

以下是经过修改后的，主要是在背景线去掉

            <asp:Chart ID="Chart1" runat="server" Height="354px" Width="717px" BackGradientStyle="LeftRight" BackHatchStyle="Horizontal" Palette="Pastel">
                       <ChartAreas>
                           <asp:ChartArea Name="ChartArea1">
                                <AxisY Enabled="True" >
                                    <MajorGrid Enabled="False" />
                                </AxisY>
                                <AxisX Enabled="True" >
                                    <MajorGrid Enabled="False" />
                                </AxisX>
                           </asp:ChartArea>
                       </ChartAreas>

            </asp:Chart>

这个是修改后的显示情况，但是此时没有数据

经过数据填充之后，显示情况为如下

其实，就我感觉，MSChart的控制没有强制必要必须放在.aspx文件之中，而可以将其放在.aspx.cs文件之中，这样效果更好，比如，在之后，添加，就会在图例之中无端显示sB这个标示，如下：

            <asp:Chart ID="Chart1" runat="server" Height="354px" Width="717px" BackGradientStyle="LeftRight" BackHatchStyle="Horizontal" Palette="Pastel">
                       <ChartAreas>
                           <asp:ChartArea Name="ChartArea1">
                           </asp:ChartArea>
                       </ChartAreas>
            </asp:Chart>

<Series>
    <asp:Series Name="sB">
    </asp:Series>
</Series>

此例完整的代码：

            <asp:Chart ID="Chart1" runat="server" Height="354px" Width="717px" BackGradientStyle="LeftRight" BackHatchStyle="Horizontal" Palette="Pastel">
                       <ChartAreas>
                           <asp:ChartArea Name="ChartArea1">
                                <Series>
                                    <asp:Series Name="sB">
                                    </asp:Series>
                                </Series>
                           </asp:ChartArea>
                       </ChartAreas>
            </asp:Chart>

另外，除了柱状图，还可以有饼图，散点图等等，目前还没有一一研究，不过这个网上的教程也非常多。此处不一一列举，这是我之前学习时找到的简单教程，挺好的，比较实用，下面也有我的回复（带妳心菲），或者我转载的内容另外就剩下我的后台代码里面对数据的控制和样式的控制了，代码如下：

            //统计信息
            Series series1 = new Series("1:" + kaoshi1);
            //设置图表类型
            series1.ChartType = SeriesChartType.Column;
            series1.BorderWidth = 2; //线条宽度  
            series1.ShadowOffset = 1; //阴影宽度  
            //series1.IsVisibleInLegend = true; //是否显示数据说明  
            //series1.IsValueShownAsLabel = true;
            //series1.MarkerStyle = MarkerStyle.Diamond;
            //series1.MarkerSize = 3;  


            /*加入数据*/
            series1.Points.AddY(yx1);
            series1.Points.AddY(lh1);
            series1.Points.AddY(jg1);
            series1.Points.AddY(bjg1);

            /*以上代码必须先于以下的代码，不然的话就会报错，说没有相应的轴*/
            //X轴显示的名称
            series1.Points[0].AxisLabel = "优";
            series1.Points[1].AxisLabel = "良";
            series1.Points[2].AxisLabel = "及格";
            series1.Points[3].AxisLabel = "不及格";


            //顶部显示的数字
            series1.Points[0].Label = Convert.ToString(yx1);
            series1.Points[1].Label = Convert.ToString(lh1);
            series1.Points[2].Label = Convert.ToString(jg1);
            series1.Points[3].Label = Convert.ToString(bjg1);

            //鼠标放上去的提示内容
            series1.Points[0].ToolTip = Convert.ToString(yx1);
            series1.Points[1].ToolTip = Convert.ToString(lh1);
            series1.Points[2].ToolTip = Convert.ToString(jg1);
            series1.Points[3].ToolTip = Convert.ToString(bjg1);

            //第2个
            Series series2 = new Series("2:" + kaoshi2);
            series2.ChartType = SeriesChartType.Column;
            series2.BorderWidth = 3;
            series2.ShadowOffset = 2;

            series2.Points.AddY(yx2);
            series2.Points.AddY(lh2);
            series2.Points.AddY(jg2);
            series2.Points.AddY(bjg2);

            series2.Points[0].Label = Convert.ToString(yx2);
            series2.Points[1].Label = Convert.ToString(lh2);
            series2.Points[2].Label = Convert.ToString(jg2);
            series2.Points[3].Label = Convert.ToString(bjg2);

            series2.Points[0].ToolTip = Convert.ToString(yx2);
            series2.Points[1].ToolTip = Convert.ToString(lh2);
            series2.Points[2].ToolTip = Convert.ToString(jg2);
            series2.Points[3].ToolTip = Convert.ToString(bjg2);

            series2.YAxisType = AxisType.Primary;
            series2.YValueType = ChartValueType.Time;

            //第3个
            Series series3 = new Series("3:" + kaoshi3);
            series3.ChartType = SeriesChartType.Column;
            series3.BorderWidth = 3;
            series3.ShadowOffset = 2;

            series3.Points.AddY(yx3);
            series3.Points.AddY(lh3);
            series3.Points.AddY(jg3);
            series3.Points.AddY(bjg3);

            series3.Points[0].Label = Convert.ToString(yx3);
            series3.Points[1].Label = Convert.ToString(lh3);
            series3.Points[3].Label = Convert.ToString(jg3);
            series3.Points[3].Label = Convert.ToString(bjg3);

            series3.Points[0].ToolTip = Convert.ToString(yx3);
            series3.Points[1].ToolTip = Convert.ToString(lh3);
            series3.Points[3].ToolTip = Convert.ToString(jg3);
            series3.Points[3].ToolTip = Convert.ToString(bjg3);

            series3.YAxisType = AxisType.Primary;
            series3.YValueType = ChartValueType.Time;

            Chart1.ChartAreas[0].AxisX.Title = "等级";设置X轴的说明
            Chart1.ChartAreas[0].AxisY.Title = "人数";//设置Y轴的说明
            Chart1.Series.Add(series1);//将内容加入到Series之中，才能展示出来
            Chart1.Series.Add(series2);
            Chart1.Series.Add(series3);
            Chart1.Legends.Add("图例");//添加图例,图例往往需要自己来添加
            Chart1.Titles.Add(kaoshi1 + "," + kaoshi2 + "," + kaoshi3 + "成绩对比");

其中的kaoshiXXX,yx1,lh1,jjg1,bjg1等都是相应的数据,整数(int)类型。

另外，一个就是要先添加轴，然后再添加名称，还有一个就是自行创建需要的图例名称。相关数据的提取工作和其他的并无二致。大概就这样吧。