yuanweisen

 

C#中WebChart的应用实例

总结:使用WebChart的步骤:

一 得到要绑定的数据表

二 确定显示是柱状图还是拆线图去实例拆线或是柱状实例(new)

三 定义实例的样式

四 给定义好的实例Data.AddX和Y的数据

五 将定义好的实例Add到WebChart上并输出显示。

 

1 首先得到要绑定到WebChart的表,实例代码如下:

 

//定义出要绑定到WebChart的表
   DataTable dt_Data=new DataTable();
   dt_Data.Columns.Add("ProductGroup");
   dt_Data.Columns.Add("Data");
   dt_Data.Columns.Add("Week");
   //循环13周,得到13周的数据
   for (int i=0;i<13;i++)
   {
    DataTable dt=Business.WOSDetail.GetWOSData(DateTime.Parse(StartDay).AddDays(-(i*7)).ToString(),this.CurrentUserCode.ToString(),this.DDL_Ctry.SelectedItem.Text);
    //每得到一周的数据后,过滤这一周的数据,得到所有产品组WOS的汇总,插入到预先定义好的表dt_Data中
    foreach ( DataRow dr in dt.Rows )
    {
     if (dr["LevelId"].ToString()=="2")
     {
      DataRow dr_Data=dt_Data.NewRow();
      dr_Data["ProductGroup"]=dr["Product Group"];
      dr_Data["Data"]=dr["WOS"];
      dr_Data["Week"]=i+1;
      dt_Data.Rows.Add(dr_Data);
     }

    }
   }
   //dt_Data表为13周所有产品组的数据汇总,需要把每个产品组的数据从该表中过滤出来
   DataTable dt_ThinkStation=FilterTable(dt_Data,"ThinkStation");
   DataTable dt_ThinkCentre=FilterTable(dt_Data,"ThinkCentre");
   DataTable dt_LenovoConsumerNB_BAU=FilterTable(dt_Data,"LenovoConsumerNB_BAU");
   DataTable dt_LenovoConsumerNB_NoteBook=FilterTable(dt_Data,"LenovoConsumerNB_NoteBook");
   DataTable dt_LenovoConsumerDT=FilterTable(dt_Data,"Lenovo Consumer DT");
   DataTable dt_ThinkPad=FilterTable(dt_Data,"ThinkPad");

 

2 如果Chart图上只有一条线,那么实例(new)出一个linechart就可以了,但一般一个Chart上会有多条线,这样就要实例出多个linechart,这样只需要实例出一个linechart数据就可以,如果是柱状图,实例是StackedColumnChart。

其实现在这样已经可以在Chart上画了折线图,但太难看,还需要定义样式

3 可以把线图或柱状图以及输出都写成一个类文件,以便调用。

 

#region LGPChart
 /// <summary>
 /// 图表
 /// </summary>
 public  class LGPChart
 {
  #region Fields
  bool _isLegend=true;
  /// <summary>
  /// 是否显示图例
  /// </summary>
  public bool HasLegend
  {
   get{return _isLegend;}
   set{_isLegend=value;}
  }
  #endregion

  #region 柱/线
  /// <summary>
  /// 柱
  /// </summary>
  /// <param name="legend">图例文字</param>
  /// <param name="color">图例颜色</param>
  /// <returns></returns>
  public StackedColumnChart GetColumnChart(string legend,Color color)
  {
   StackedColumnChart ct=new StackedColumnChart();
   ct.Shadow.Visible=true;
   ct.Fill.Color=color;
   ct.DataLabels.Visible=true;
   ct.MaxColumnWidth=30;
   ct.Legend=legend;
   return ct;
  }
  /// <summary>
  /// 线
  /// </summary>
  /// <param name="legend">图例文字</param>
  /// <param name="color">图例颜色</param>
  /// <returns></returns>
  public LineChart GetLineChart(string legend,Color color)
  {
   LineChart line=new LineChart();
   line.Line.Color=color;
   line.LineMarker.Color=Color.Black;
   line.LineMarker.Size=3;
   line.ShowLegend=true;
   line.DataLabels.Visible=true;
   line.Legend=legend;
   return line;
  }
  /// <summary>
  /// 輸出
  /// </summary>
  /// <param name="chart">Control</param>
  /// <param name="xTitle">X標題</param>
  /// <param name="yTitle">Y標題</param>
  /// <param name="chartText">表名</param>
  public void ChartOut(ChartControl chart,string xTitle,string yTitle,string chartText)
  {
   //css
   chart.GridLines=WebChart.GridLines.Horizontal;//线
   //图例
   chart.HasChartLegend=this.HasLegend;
   chart.Legend.Position=LegendPosition.Bottom;
   chart.Legend.Width=30;
   chart.BottomChartPadding=5;
   //X Y 轴,标题
   chart.YTitle.Text=yTitle;
   chart.XTitle.Text=xTitle;
   chart.ShowTitlesOnBackground=false;
   chart.XTitle.Font=new Font("Tahoma",12);
   chart.XTitle.ForeColor=Color.FromArgb(0,107,107);
   chart.XTitle.StringFormat.LineAlignment=StringAlignment.Far;

   if(chartText.Trim().Length>0)
   {
    ChartText ctext=new ChartText();
    ctext.Text=chartText;
    ctext.Font=new Font("Tahoma",13,FontStyle.Bold|FontStyle.Italic);
    ctext.ForeColor=Color.White;
    //ct.StringFormat.FormatFlags=StringFormatFlags.DirectionVertical;
    ctext.StringFormat.Alignment=StringAlignment.Center;
    chart.ChartTitle=ctext;
   }
   //output
   //chart.PlotBackground.ImageUrl=HttpContext.Current.Server.MapPath( "../chart_bg.png");
   //bg
   ChartInterior ci=new ChartInterior();
   ci.Color=Color.Silver;
   ci.ForeColor=Color.Gainsboro;
   chart.Background=ci;
   chart.Border.Color=Color.Silver;
   chart.Border.Width=1;

//最重要的,WebChart控件显示输出
   chart.RedrawChart();
  }
  #endregion
 }
 #endregion

 

4 类文件写完后,在表示层调用该类文件,

Business.LGPChart wct=new PRC.Business.LGPChart();
   lc[0]=wct.GetLineChart("ThinkStation",Color.Blue);
   lc[1]=wct.GetLineChart("ThinkCentre",Color.Black);
   lc[2]=wct.GetLineChart("LenovoConsumerNB_BAU",Color.Red);
   lc[3]=wct.GetLineChart("LenovoConsumerNB_NoteBook",Color.YellowGreen);
   lc[4]=wct.GetLineChart("LenovoConsumerDT",Color.Brown);
   lc[5]=wct.GetLineChart("ThinkPad",Color.Aqua);

5 最重要的一步就是绑定X,Y轴数据

foreach (DataRow dr in dt_ThinkStation.Rows )
   {
    lc[0].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }
   foreach ( DataRow dr in dt_ThinkCentre.Rows )
   {
    lc[1].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }
   foreach (DataRow dr in dt_LenovoConsumerNB_BAU.Rows )
   {
    lc[2].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }
   foreach ( DataRow dr in dt_LenovoConsumerNB_NoteBook.Rows )
   {
    lc[3].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }
   foreach (DataRow dr in dt_LenovoConsumerDT.Rows )
   {
    lc[4].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }
   foreach ( DataRow dr in dt_ThinkPad.Rows )
   {
    lc[5].Data.Add(new ChartPoint(dr["Week"].ToString(),Convert.ToInt32(dr["Data"].ToString())));
   }

6 线图的样式以及数据都定义好了,下一步绑定到WebChart控件上。

for (int i=0;i<=5;i++)
   {
    this.ChartWos.Charts.Add(lc[i]);
   }

7 WebChart输出

wct.ChartOut(this.ChartWos,"Week","WOS","");

posted on 2009-01-22 18:24    阅读(6013)  评论(0编辑  收藏  举报

导航