在Web上作图一般都采用先生成图片，然后再显示的方法。本文也不例外。
自制了一个Web用户控件，通过设置属性可以显示几种简单的图形。
柱状图、面积图、折线图、条状图、曲线图。
怎样安装OWC的环境，已经有很多文章了，这里就不再赘述了。
下面是控件的代码，页面上只需要加一个名为Image1的Image即可。
using System; using System.Data; using System.Drawing; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using Microsoft.Office.Interop.OWC; using System.IO;
/// <summary>
/// ControlGraph 的摘要说明。
/// </summary> public class ControlGraph : System.Web.UI.UserControl {
//图表类型 private ChartChartTypeEnum m_GraphType = ChartChartTypeEnum.chChartTypeColumnClustered; //图表标题 private string m_Title=""; //X轴标题 private string m_XTitle=""; //Y轴标题 private string m_YTitle=""; private bool m_HasValue=true; protected System.Web.UI.WebControls.Image Image1; private DataTable m_dt;
public enum GraphTypeEnum{ColumnClustered,Line,Pie,BarClustered,SmoothLine,Area};
private void Page_Load(object sender, System.EventArgs e) {
} #region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器 /// 修改此方法的内容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion public void DataSource(DataTable dt) { m_dt=dt; } /// <summary> /// 图形的形式显示表 /// </summary> /// <param name="dt"></param> public void SetBind() { // 在此处放置用户代码以初始化页面 //创建ChartSpace对象来放置图表 ChartSpace objCSpace = new ChartSpaceClass (); //在ChartSpace对象中添加图表，Add方法返回chart对象 ChChart objChart = objCSpace.Charts.Add (0); //指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到 objChart.Type = m_GraphType;// ChartChartTypeEnum.chChartTypeColumnClustered; //指定图表是否需要图例 objChart.HasLegend = true; //给定标题 objChart.HasTitle = true; objChart.Title.Caption= m_Title;//"上半年分布图"; if(m_GraphType == ChartChartTypeEnum.chChartTypeColumnClustered) { //给定x,y轴的图示说明 objChart.Axes[0].HasTitle = true; objChart.Axes[0].Title.Caption = m_XTitle;//"Y ： 数量"; objChart.Axes[1].HasTitle = true; objChart.Axes[1].Title.Caption = m_YTitle;//"X ： 月份"; } //计算数据 int iCount=m_dt.Columns.Count; int jCount=m_dt.Rows.Count; string strSeriesName=""; string strCategory="" ; string strValue=""; for(int i=0;i<iCount;i++) { if(i==0) { for(int j=0;j<jCount;j++) { strCategory+=(m_dt.Rows[j][0].ToString()+'\t'); } } else { strSeriesName=m_dt.Columns[i].ColumnName; strValue=""; for(int j=0;j<jCount;j++) { strValue+=(m_dt.Rows[j][i].ToString()+'\t'); } //添加一个series objChart.SeriesCollection.Add(i-1); //给定series的名字 objChart.SeriesCollection[i-1].SetData (ChartDimensionsEnum.chDimSeriesNames, + (int)ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName); //给定分类 objChart.SeriesCollection[i-1].SetData (ChartDimensionsEnum.chDimCategories, + (int)ChartSpecialDataSourcesEnum.chDataLiteral, strCategory); //给定值 objChart.SeriesCollection[i-1].SetData (ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, strValue); //添加值 if(m_HasValue) { objChart.SeriesCollection[i-1].DataLabelsCollection.Add(); if(m_GraphType==ChartChartTypeEnum.chChartTypePie) { objChart.SeriesCollection[i-1].DataLabelsCollection[0].HasPercentage = true; } else { objChart.SeriesCollection[i-1].DataLabelsCollection[0].HasPercentage = false; } objChart.SeriesCollection[i-1].DataLabelsCollection[0].HasCategoryName = false; if(m_GraphType==ChartChartTypeEnum.chChartTypePie) { objChart.SeriesCollection[i-1].DataLabelsCollection[0].HasValue = false; } else { objChart.SeriesCollection[i-1].DataLabelsCollection[0].HasValue = true; } objChart.SeriesCollection[i-1].DataLabelsCollection[0].Interior.Color = "white"; objChart.SeriesCollection[i-1].DataLabelsCollection[0].Font.Name = "Verdana"; } } } //输出成GIF文件. string strFullPathAndName=Server.MapPath(System.DateTime.Now.Ticks.ToString() +".gif"); objCSpace.ExportPicture( strFullPathAndName, "GIF", 600, 350); Image1.ImageUrl=strFullPathAndName; Image1.Visible =true; RemoveFiles(Server.MapPath(".")); } /// <summary> /// 删除超时文件 /// </summary> /// <param name="strPath"></param> private void RemoveFiles(string strPath) { System.IO.DirectoryInfo di = new DirectoryInfo(strPath); FileInfo[] fiArr = di.GetFiles(); foreach (FileInfo fi in fiArr) { if(fi.Extension.ToString() ==".gif" ) { // if file is older than 2 minutes, we'll clean it up TimeSpan min = new TimeSpan(0,0,0,2,0); if(fi.CreationTime < DateTime.Now.Subtract(min)) { fi.Delete(); } } } } /// <summary> /// 图表类型 /// </summary> public GraphTypeEnum GraphType { get { switch(m_GraphType) { case ChartChartTypeEnum.chChartTypeColumnClustered: return GraphTypeEnum.ColumnClustered; case ChartChartTypeEnum.chChartTypeLine: return GraphTypeEnum.Line; case ChartChartTypeEnum.chChartTypePie: return GraphTypeEnum.Pie; case ChartChartTypeEnum.chChartTypeBarClustered: return GraphTypeEnum.BarClustered; case ChartChartTypeEnum.chChartTypeSmoothLine: return GraphTypeEnum.SmoothLine; case ChartChartTypeEnum.chChartTypeArea: return GraphTypeEnum.Area; default: return GraphTypeEnum.ColumnClustered; } } set{ switch(value) { case GraphTypeEnum.ColumnClustered: m_GraphType= ChartChartTypeEnum.chChartTypeColumnClustered; break; case GraphTypeEnum.Line: m_GraphType= ChartChartTypeEnum.chChartTypeLine; break; case GraphTypeEnum.Pie: m_GraphType= ChartChartTypeEnum.chChartTypePie; break; case GraphTypeEnum.BarClustered: m_GraphType = ChartChartTypeEnum.chChartTypeBarClustered; break; case GraphTypeEnum.SmoothLine: m_GraphType = ChartChartTypeEnum.chChartTypeSmoothLine; break; case GraphTypeEnum.Area: m_GraphType = ChartChartTypeEnum.chChartTypeArea; break; } } } /// <summary> /// 图表标题 /// </summary> public string Title { get{return m_Title;} set{m_Title=value;} } /// <summary> /// X轴标题 /// </summary> public string XTitle { get{return m_XTitle;} set{m_XTitle=value;} } /// <summary> /// YY轴标题 /// </summary> public string YTitle { get{return m_YTitle;} set{m_YTitle=value;} } /// <summary> /// 是否显示值 /// </summary> public bool HasValue { get{return m_HasValue;} set{m_HasValue=value;} } }
控件的调用
ControlGraph1.GraphType =ControlGraph.GraphTypeEnum.ColumnClustered; ControlGraph1.Title = "工作量和bug"; ControlGraph1.XTitle ="数值"; ControlGraph1.YTitle ="人员"; DataTable dt = new DataTable(); dt.Columns.Add("Name"); dt.Columns.Add("cost"); dt.Columns.Add("bug"); DataRow rw = dt.NewRow(); rw["Name"]= "梁"; rw["Cost"]= "12"; rw["bug"]= "5"; dt.Rows.Add(rw); rw = dt.NewRow(); rw["Name"]= "李"; rw["Cost"]= "15"; rw["bug"]= "2"; dt.Rows.Add(rw); rw = dt.NewRow(); rw["Name"]= "王"; rw["Cost"]= "8"; rw["bug"]= "1"; dt.Rows.Add(rw);ControlGraph1.DataSource(dataTable);
ControlGraph1.SetBind()
数据源采用DataTable,第一列为分类，其他列为值。