利用C#实现条形图、饼图的绘制（一）

    近日，在编写一个统计程序的时候，希望通过条形图、饼图的形式形象地展现统计数据，为此，专门到sourceforge、codeproject等开源网站阅读查找有关资料，在这过程当中，阅读了一份源码，感觉很多东西都可以借鉴，只不过，其最多只支持10个条形图的显示，因为画布仅有200*200，每个条形图占了10，间距又占了10。对于这一点，笔者感觉不甚满意，于是决定在参考借鉴原有代码的基础上，做一个更加通用的绘图程序。当然，因时间有限，笔者只做了针对条形图、饼图的实现。至于其他图形，有兴趣的朋友不妨自己实现。本篇文章将介绍条形图的实现，在另一篇文章中将介绍饼图的实现。
    为实现这个简单的绘图程序，首先构建了一个GraphDrawing项目工程。整个程序的设计思路相对较简单，通过类BarGraph来实现对条形图的绘制，通过WinForm窗体来实现对图形数据的输入及输出。此外，还特别增加了一个工具类Utils，里面包含了公共静态方法，当前用来获取图形绘制的颜色列表。
    整个绘图程序的实现，均是通过C#中的GDI+来处理的，只要充分利用GDI+中的各种方法，绘制这么一个相对简单的图形也就不成问题了。绘制条形图大体经过以下几个步骤：
    （1）创建Graphics对象实例；
    （2）设置图形及文本的属性；
    （3）设置画布和边框；
    （4）绘制标题文本；
    （5）循环绘制条形图；
    （6）绘制X及Y坐标的线条及文本；
    （7）绘制图例。
    以下是BarGraph类的代码示例：
using System; using System.Data; using System.Drawing; using System.Drawing.Text; using System.Drawing.Drawing2D; using System.Collections.Generic; namespace GraphDrawing { class BarGraph { #region Member fields /// <summary> /// The color list for each bar drawing /// </summary> private List<Color> m_colorList; /// <summary> /// The data for graph drawing /// </summary> private DataTable m_dataTable; /// <summary> /// The width of graph /// </summary> private int m_width; /// <summary> /// The height of graph /// </summary> private int m_height; /// <summary> /// The legend width of graph /// </summary> private int m_legendWidth; #endregion #region Public properties /// <summary> /// The title of graph /// </summary> public string GraphTitle { get; set; } /// <summary> /// The font format of graph /// </summary> public string FontFormat { get; set; } /// <summary> /// The x axis label name of graph /// </summary> public string XLabelName { get; set; } /// <summary> /// The y axis label name of graph /// </summary> public string YLabelName { get; set; } #endregion /// <summary> /// Constructor with arguments /// </summary> /// <param name="width">the graph width</param> /// <param name="height">the graph height</param> /// <param name="legendWidth">the graph legend width</param> /// <param name="dataTable">the graph data</param> public BarGraph(int width, int height, int legendWidth, DataTable dataTable) { m_width = width; m_height = height; m_legendWidth = legendWidth; m_dataTable = dataTable; m_colorList = Utils.GetColorList(); } /// <summary> /// Generate Bar graph /// </summary> /// <returns>bitmap</returns> public Bitmap DrawBarGraph() { int iChartTop = 75; int iChartLeft = 50; int iChartWidth = m_width - 250; int iChartHeight = m_height - 150; // Calculate the high point float fHighPoint = 0; foreach (DataRow row in m_dataTable.Rows) { if (fHighPoint < Convert.ToSingle(row[1])) { fHighPoint = Convert.ToSingle(row[1]); } } // Create an object of Graphics Bitmap bitmap = new Bitmap(m_width, m_height); Graphics graph = Graphics.FromImage(bitmap); // Set the attribute of bar and text graph.ScaleTransform(1, 1); graph.SmoothingMode = SmoothingMode.Default; graph.TextRenderingHint = TextRenderingHint.AntiAlias; // Set the canvas and the border graph.Clear(Color.White); graph.DrawRectangle(Pens.Green, 0, 0, m_width - 5, m_height - 5); // Draw the graph title graph.DrawString(GraphTitle, new Font(FontFormat, 14), Brushes.Black, new PointF(7, 35)); // Draw the bar float barWidth = iChartWidth / (m_dataTable.Rows.Count * 2); float barHeight = m_dataTable.Rows.Count; PointF barOrigin = new PointF(iChartLeft + (barWidth / 2), 0); for (int i = 0; i < m_dataTable.Rows.Count; i++) { barHeight = Convert.ToSingle(m_dataTable.Rows[i][1]) * 300 / fHighPoint; barOrigin.Y = iChartTop + iChartHeight - barHeight; graph.FillRectangle(new SolidBrush(m_colorList[i]), barOrigin.X, barOrigin.Y, barWidth, barHeight); barOrigin.X = barOrigin.X + (barWidth * 2); } // Draw the line of x axis and y axis graph.DrawLine(new Pen(Color.Black, 2), new Point(iChartLeft, iChartTop), new Point(iChartLeft, iChartTop + iChartHeight)); graph.DrawLine(new Pen(Color.Black, 2), new Point(iChartLeft, iChartTop + iChartHeight), new Point(iChartLeft + iChartWidth, iChartTop + iChartHeight)); // Draw the text of x axis graph.DrawString(XLabelName, new Font(FontFormat, 12), Brushes.Blue, new PointF(m_width - XLabelName.Length * 4 - 250, iChartTop + iChartHeight + 10)); // Draw the text of y axis StringFormat sf = new StringFormat(StringFormatFlags.DirectionVertical); graph.DrawString(YLabelName, new Font(FontFormat, 12), Brushes.Blue, new PointF(iChartLeft - 25, iChartTop), sf); // Draw the legend of graph bitmap = DrawLegend(bitmap); return bitmap; } /// <summary> /// Generate the legend /// </summary> /// <param name="graph"></param> /// <returns></returns> private Bitmap DrawLegend(Bitmap graph) { Bitmap bitmap = new Bitmap(250, m_height); Graphics objGraphic = Graphics.FromImage(bitmap); Graphics graphic = Graphics.FromImage(graph); int i, x; for (i = 0, x = m_legendWidth; i < m_dataTable.Rows.Count; i++) { //Draw the bar SolidBrush brush = new SolidBrush(m_colorList[i]); objGraphic.FillRectangle(brush, 10, m_height - 90 - x, m_legendWidth, m_legendWidth); string drawString = m_dataTable.Rows[i][0].ToString() + " - " + m_dataTable.Rows[i][1].ToString(); Font drawFont = new Font(FontFormat, 8); SolidBrush drawBrush = new SolidBrush(Color.Black); objGraphic.DrawString(drawString, drawFont, drawBrush, m_legendWidth * 2, m_height - 90 - x); //x axis spacing by m_legendWidth + 5 x += m_legendWidth + 5; } // Draw the string and the rectangle for the legend graphic.DrawRectangle(new Pen(Color.Purple, 1), m_width - 180, m_height - 85 - x, 160, x + 10); graphic.DrawString("Legend", new Font(FontFormat, 11, FontStyle.Bold), Brushes.Purple, new PointF(m_width - 180, m_height - 110 - x)); graphic.DrawImage(bitmap, m_width - 180, 10); return (graph); } } }

    在WinForm中，调用也非常简单，代码示例如下：
/// <summary> /// Draw the bar graph /// </summary> private void DrawBarGraph() { this.ReadInputData(); string strTitle = txtGraphTitle.Text; string strFont = "Courier"; string strXLabel = txtXLabel.Text + " →"; string strYLabel = "← " + txtYLabel.Text; int iWidth = picBarGraph.Width; int iHeight = picBarGraph.Height; int iLegendWidth = (iWidth - 200) / (m_dataTable.Rows.Count * 2); BarGraph barGraph = new BarGraph(iWidth, iHeight, iLegendWidth, m_dataTable); barGraph.GraphTitle = strTitle; barGraph.FontFormat = strFont; barGraph.XLabelName = strXLabel; barGraph.YLabelName = strYLabel; // Output the graph to the picture box picBarGraph.Image = barGraph.DrawBarGraph(); }

最终的条形图绘制界面效果如下图所示：

    以上是关于条形图绘制的粗略介绍，该绘图程序可适应窗体大小的变化。在后面笔者将会对该程序作进一步完善，以实现对饼图的绘制。同时，需要说明的是，本绘图程序的部分实现思路参考了相关源码，在此对相关源码的作者表示感谢。