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","");