dotnetcharting.dll 菜鸟笔记

 一直想知道如何用asp.net 画出漂亮的图，以便更好的呈现数据库中的数据

开始用Bitmap Graphics pen 等一条线一条线的画，但出来的效果还是不好看。在网上知道了dotnetcharting.dll 这个组件，摸索了两天终于知道怎么用了。

比那个梅花雨日历复杂一些~~~

 

1. 下載dotnetcharting.dll 文件 加入bin文件夾中
2. 重写一个类，方便直接调用。这个网上代码很多，但让个namespace搞糊涂了，因为新建的class文件没有这个关键字。反正我就往里套。

    using System.Text;

using dotnetCHARTING;

using System.Drawing; // 这个三个要加上

public class DotChar

{

    

    private string _phaysicalimagepath;//图片存放路径

    private string _title; //图片标题

    private string _xtitle;//图片x座标名称

    private string _ytitle;//图片y座标名称

    private string _seriesname;//图例名称

    private int _picwidth;//图片宽度

    private int _pichight;//图片高度

    private DataTable _dt;//图片数据源

 

    public string PhaysicalImagePath

    {

        set { _phaysicalimagepath = value; }

        get { return _phaysicalimagepath; }

    }

 

    /**/

    /// <summary>

    /// 图片标题

    /// </summary>

    public string Title

    {

        set { _title = value; }

        get { return _title; }

    }

    /**/

    /// <summary>

    /// 图片标题

    /// </summary>

    public string XTitle

    {

        set { _xtitle = value; }

        get { return _xtitle; }

    }

    /**/

    /// <summary>

    /// 图片标题

    /// </summary>

    public string YTitle

    {

        set { _ytitle = value; }

        get { return _ytitle; }

    }

 

    /**/

    /// <summary>

    /// 图例名称

    /// </summary>

    public string SeriesName

    {

        set { _seriesname = value; }

        get { return _seriesname; }

    }

    /**/

    /// <summary>

    /// 图片宽度

    /// </summary>

    public int PicWidth

    {

        set { _picwidth = value; }

        get { return _picwidth; }

    }

    /**/

    /// <summary>

    /// 图片高度

    /// </summary>

    public int PicHight

    {

        set { _pichight = value; }

        get { return _pichight; }

    }

    /**/

    /// <summary>

    /// 图片数据源

    /// </summary>

    public DataTable DataSource

    {

        set { _dt = value; }

        get { return _dt; }

    }

    public DotChar()

    {

        //

        // TODO: Add constructor logic here

        //

 

    }

 

   public void  ShowData(string PhaysicalImagePath,string Title,string XTitle,string YTitle,string SeriesName)

    {

    _phaysicalimagepath=PhaysicalImagePath;

    _title=Title;

    _xtitle=XTitle;

    _ytitle=YTitle;

    _seriesname=SeriesName;

          

    }

    /**/

    /// <summary>

    /// 柱形图

    /// </summary>

    /// <returns></returns>

    public void CreateColumn(dotnetCHARTING.Chart chart)

    {

        chart.Title = this._title;

        chart.XAxis.Label.Text = this._xtitle;

        chart.YAxis.Label.Text = this._ytitle;

        chart.TempDirectory = this._phaysicalimagepath;

        chart.Width = this._picwidth;

        chart.Height = this._pichight;

        chart.Type = ChartType.Combo;

        chart.Series.Type = SeriesType.Cylinder;

        chart.Series.Name = this._seriesname;

        chart.Series.Data = this._dt;

        chart.SeriesCollection.Add();

        chart.DefaultSeries.DefaultElement.ShowValue = true;

        chart.ShadingEffect = true;

        chart.Use3D = false;

        chart.Series.DefaultElement.ShowValue = true;

    }

 

    /**/

    /// <summary>

    /// 饼图

    /// </summary>

    /// <returns></returns>

    public void CreatePie(dotnetCHARTING.Chart chart)

    {

        chart.Title = this._title;

        chart.TempDirectory = this._phaysicalimagepath;

        chart.Width = this._picwidth;

        chart.Height = this._pichight;

        chart.Type = ChartType.Pie;

        chart.Series.Type = SeriesType.Cylinder;

        chart.Series.Name = this._seriesname;

 

        chart.ShadingEffect = true;

        chart.Use3D = false;

        chart.DefaultSeries.DefaultElement.Transparency = 20;

        chart.DefaultSeries.DefaultElement.ShowValue = true;

        chart.PieLabelMode = PieLabelMode.Outside;

        chart.SeriesCollection.Add(getArrayData());

        chart.Series.DefaultElement.ShowValue = true;

    }

 

    private SeriesCollection getArrayData()

    {

       SeriesCollectionSC= new SeriesCollection();

        DataTable dt = this._dt;

 

        for (int i = 0; i < dt.Rows.Count; i++)

        {

            Series s = new Series();

            s.Name = dt.Rows[i][0].ToString();

 

            Element e = new Element();

 

            // 每元素的名称

            e.Name = dt.Rows[i][0].ToString();

 

            // 每元素的大小数值

            e.YValue = Convert.ToInt32(dt.Rows[i][1].ToString());

 

            s.Elements.Add(e);

            SC.Add(s);

        }

        return SC;

    }

    /**/

    /// <summary>

    /// 曲线图

    /// </summary>

    /// <returns></returns>

    public void CreateLine(dotnetCHARTING.Chart chart)

    {

        chart.Title = this._title;

        chart.XAxis.Label.Text = this._xtitle;

        chart.YAxis.Label.Text = this._ytitle;

        chart.TempDirectory = this._phaysicalimagepath;

        chart.Width = this._picwidth;

        chart.Height = this._pichight;

        chart.Type = ChartType.Combo;

        chart.Series.Type = SeriesType.Line;

        chart.Series.Name = this._seriesname;

        chart.Series.Data = this._dt;

        chart.SeriesCollection.Add();

        chart.DefaultSeries.DefaultElement.ShowValue = true;

        chart.ShadingEffect = true;

        chart.Use3D = false;

        chart.Series.DefaultElement.ShowValue = true;

    }

1. 将dll 文件加入工具栏

以前没有这样的操作经验，网上都说直接拖进去，我把dll文件拖到工具栏的General中也只是一串字符。

拖出来毫无反应。后来发现正确的方法是

在工具栏上右键 –-> Choose Itemà 在.Net Framework Components 中点击 Browse 选择dotnetcharting.dll 文件 即可 工具栏上会出现一个  Chart的标志

这样算是添加成功了。 Dotnetcharting 的文字是add tab 自己写进去。

1. 在使用的页面注册

 <%@ Register Assembly="dotnetCHARTING" Namespace="dotnetCHARTING" TagPrefix="dotnetCHARTING" %>

这一句不能少  再把空间拖入页面 会显示 这样的标志。

<dotnetCHARTING:Chart ID="Chart1" runat="server">

    </dotnetCHARTING:Chart>

1. 后台代码

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using dotnetCHARTING;

 

public partial class Dochar : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

    {

        DotChar show = new DotChar(); // 最初重写的类

        show.Title = "2012年各月消费情况统计";

        show.XTitle = "月份";

        show.YTitle = "金额(万元)";

        show.PicHight = 300;

        show.PicWidth = 600;

        show.SeriesName = "具体详情";

        show.PhaysicalImagePath = "ChartImages";

 

        string sql = "select sendtime,sendsum from Tdraw";

        DataSet ds = Class1.dataset(sql);

 

        DataTable dt = ds.Tables[0];

 

        show.DataSource = dt;

       // show.CreatePie(this.Chart2);

        //show.CreateColumn(this.Chart2);

 

        show.CreateLine(this.Chart1);// 开始控件没有添加成功 这里老是报错

}

} 

//对比图就要用 SeriesCollection  但是还是没搞清楚 如何画出折线和柱子的对比 。