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