asp.net 简单实现图表控件(KeenCharts.dll)

在网上看到很多关于图表的控件,那些图表控件功能确实很强大,该控件还是不能与那些控件在功能上对比的,该控件只是可以实现基本数据的显示,可以让人一目了然的了解数据的变换情况,欢迎大家提出宝贵的建议和意见.

控件 KeenCharts.dll 下载

使用方法:

1.添加控件(KeenCharts.dll)引用,并且添加(或者拖放)到工具箱中.

2.配置文件:

主要配置图表输出的存放路径,name属性是那个图表(折线图,饼形图,条形图),connectionString属性是存放路径(文件夹必须存在),lockItem属性表示是否使用该路径

  <connectionStrings>
    <add name="PiePath" connectionString="/ChartsSource/pieSource/" lockItem="true"/>
    <add name="BarPath" connectionString="/ChartsSource/barSource/" lockItem="true"/>
    <add name="LinePath" connectionString="/ChartsSource/lineSource/" lockItem="true"/>
  </connectionStrings>

3.注册控件:

<%@ Register assembly="KeenCharts" namespace="KeenChartsContorls" tagprefix="cc1" %>

4.前台主要代码:

<div>
        1. 条形图,折线图,饼形图 实现 I : 直接拖<br />
        <cc1:BarCharts ID="BarCharts1" runat="server" ApartGroupCount="1" 
            GroupStyle="Row" Heith="200" LeftWidth="80" Width="300" 
            XGroupLength="18" XInitGap="5" XUnit="(省)" YGroupCount="10" YGroupLength="19" 
            YGroupValue="600000" YInitGap="5" YMinValue="0" YUnit="(人)" 
            RightWidth="100" XLineStyle="DottedLine" YLineStyle="DottedLine" />
        <cc1:LineCharts ID="LineCharts1" runat="server" AllAvgLineStyle="StubLine" 
            Heith="200" LineShowStyle="Broken" NodeSize="6" Width="300" 
            XGroupLength="60" XInitGap="5" XUnit="(省)" YGroupCount="10" YGroupLength="19" 
            YGroupValue="600000" YInitGap="5" YMinValue="0" YUnit="(人)" 
            RightWidth="100" LeftWidth="80" XLineStyle="DottedLine" YLineStyle="DottedLine" />
        <cc1:PieCharts ID="PieCharts1" runat="server" Diameter="100" 
            OutTextStyle="Title_Perent" Unit="单位:人" RightWidth="130" 
            TypicalDrawingTop="20" />
          <br />  
          2.实现 II : span标签<br />
        <span id="chartshowspan" runat="server"></span>
        <br />
        3.实现 III : repeater标签<br />
        <asp:Repeater ID="orpt" runat="server">
        <ItemTemplate>
        <cc1:PieCharts ID="PieCharts1" runat="server" Diameter="100" 
            OutTextStyle="Title_Perent" Unit="单位:人" RightWidth="130" 
            TypicalDrawingTop="20" Title='<%# Eval("Title") %>' IsAotuUpdate="true"
             AppendInfo='<%# Eval("Appendinfo") %>' DataSource='<%# Eval("Rptlists") %>' />
        </ItemTemplate>
        </asp:Repeater>
    </div>

 5.后台代码:模拟数据比较多,以后可以根据项目需求动态生成数据不必模拟

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 KeenChartsContorls;
using System.Collections.Generic;

namespace WebApplication1.View
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            /*
             * 
             * 声明:ChartsDataLists类是该控件为了需求定义的类,为了加载数据方便
             * 
             * 该控件还可以适应:数组,集合,Hashtable集合,Dictionary<T,T>泛型集合,以后详细举例说明
             * 该实例使用自定义类(ChartsDataLists)结构加载数据
             * 
             */

            //1.第一种实现方法,直接数据绑定
            #region 1
            //模拟定义数据
            ChartsDataLists chartslists = new ChartsDataLists();
            #region 模拟数据
            //声明列
            ChartsColumn ccolumn0 = new ChartsColumn("就业");
            ChartsColumn ccolumn1 = new ChartsColumn("失业");

            //添加列
            chartslists.Columns.Add(ccolumn0);
            chartslists.Columns.Add(ccolumn1);

            //给第一行("ccolumn0")添加值(对应行,列)
            chartslists.Add(new ChartsValue(ccolumn0, new ChartsRow("北京"), 977387), true);
            chartslists.Add(new ChartsValue(ccolumn0, new ChartsRow("上海"), 1251461), true);
            chartslists.Add(new ChartsValue(ccolumn0, new ChartsRow("江苏"), 4486706), true);
            chartslists.Add(new ChartsValue(ccolumn0, new ChartsRow("广东"), 5525078), true);
            chartslists.Add(new ChartsValue(ccolumn0, new ChartsRow("陕西"), 1996061), true);

            //给第二行("ccolumn1")添加值(对应行,列)
            chartslists.Add(new ChartsValue(ccolumn1, new ChartsRow("北京"), 43068), true);
            chartslists.Add(new ChartsValue(ccolumn1, new ChartsRow("上海"), 57230), true);
            chartslists.Add(new ChartsValue(ccolumn1, new ChartsRow("江苏"), 104882), true);
            chartslists.Add(new ChartsValue(ccolumn1, new ChartsRow("广东"), 215847), true);
            chartslists.Add(new ChartsValue(ccolumn1, new ChartsRow("陕西"), 62746), true);

            #endregion

            //给条形图赋值
            BarCharts1.Title = "部分省16岁及以上经济活动人口就业情况";//显示标题
            BarCharts1.AppendInfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");//附加标题
            BarCharts1.DataSource = chartslists;//绑定数据
            BarCharts1.ShowView();//显示图表

            //给折线图赋值
            LineCharts1.Title = "部分省16岁及以上经济活动人口就业情况";//显示标题
            LineCharts1.AppendInfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");//附加标题
            LineCharts1.DataSource = chartslists;//绑定数据
            LineCharts1.ShowView();//显示图表

            //给饼形图赋值
            ChartsDataLists piedatas = new ChartsDataLists();
            #region 模拟数据
            ChartsColumn cc0 = new ChartsColumn("就业");
            ChartsColumn cc1 = new ChartsColumn("失业");
            piedatas.Columns.Add(cc0);
            piedatas.Columns.Add(cc1);
            piedatas.Add(new ChartsValue(cc0, new ChartsRow("北京"), 977387), true);
            piedatas.Add(new ChartsValue(cc1, new ChartsRow("北京"), 43068), true);
            #endregion

            PieCharts1.Title = "北京市人口就业分部";//显示标题
            PieCharts1.AppendInfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");//附加标题
            PieCharts1.DataSource = piedatas;//绑定数据
            PieCharts1.ShowView();//显示图表

            #endregion

            //2.第二种实现方法,span标签实现,以饼形图为例
            #region 2
            //模拟定义数据
            ChartsDataLists piedatassx = new ChartsDataLists();
            #region 模拟数据
            cc0 = new ChartsColumn("就业");
            cc1 = new ChartsColumn("失业");
            piedatassx.Columns.Add(cc0);
            piedatassx.Columns.Add(cc1);
            piedatassx.Add(new ChartsValue(cc0, new ChartsRow("陕西"), 1996061), true);
            piedatassx.Add(new ChartsValue(cc1, new ChartsRow("陕西"), 62746), true);
            #endregion
            
            //实例化饼形图
            PieCharts piesx = new PieCharts();
            piesx.Title = "陕西省人口就业分部";//说明标题
            piesx.AppendInfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");//附加标题
            piesx.DataSource = piedatassx;//绑定数据
            piesx.Unit = "单位:人";//设置单位
            piesx.RightWidth = 130;//据右边距离
            piesx.Diameter = 100;//条形图直径
            piesx.TypicalDrawingTop = 20;//图例说明距上面的距离
            piesx.OutTextStyle = ChartsBase.ShowInfoStyle.Title_Perent;

            chartshowspan.InnerHtml = piesx.GetInnerHTML(this);//给span标签绑定
            #endregion

            //3.第三种实现方法,repeater实现
            #region 3
            //模拟数据
            List<OtherByRpt> rptlists = new List<OtherByRpt>();

            #region 模拟数据
            //1.
            ChartsDataLists piedatasrpt = new ChartsDataLists();
            cc0 = new ChartsColumn("就业");
            cc1 = new ChartsColumn("失业");
            piedatasrpt.Columns.Add(cc0);
            piedatasrpt.Columns.Add(cc1);
            piedatasrpt.Add(new ChartsValue(cc0, new ChartsRow("上海"), 1251461), true);
            piedatasrpt.Add(new ChartsValue(cc1, new ChartsRow("上海"), 57230), true);

            OtherByRpt obr = new OtherByRpt();
            obr.Title = "上海市人口就业分部";
            obr.Appendinfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");
            obr.Rptlists = piedatasrpt;
            rptlists.Add(obr);

            //2.
            piedatasrpt = new ChartsDataLists();
            cc0 = new ChartsColumn("就业");
            cc1 = new ChartsColumn("失业");
            piedatasrpt.Columns.Add(cc0);
            piedatasrpt.Columns.Add(cc1);
            piedatasrpt.Add(new ChartsValue(cc0, new ChartsRow("江苏"), 4486706), true);
            piedatasrpt.Add(new ChartsValue(cc1, new ChartsRow("江苏"), 104882), true);

            obr = new OtherByRpt();
            obr.Title = "江苏市人口就业分部";
            obr.Appendinfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");
            obr.Rptlists = piedatasrpt;
            rptlists.Add(obr);

            //3.
            piedatasrpt = new ChartsDataLists();
            cc0 = new ChartsColumn("就业");
            cc1 = new ChartsColumn("失业");
            piedatasrpt.Columns.Add(cc0);
            piedatasrpt.Columns.Add(cc1);
            piedatasrpt.Add(new ChartsValue(cc0, new ChartsRow("广东"), 5525078), true);
            piedatasrpt.Add(new ChartsValue(cc1, new ChartsRow("广东"), 215847), true);

            obr = new OtherByRpt();
            obr.Title = "广东市人口就业分部";
            obr.Appendinfo = DateTime.Now.ToString("yyyy/MM/dd hh:mm");
            obr.Rptlists = piedatasrpt;
            rptlists.Add(obr);
            #endregion

            //repeater绑定
            orpt.DataSource = rptlists;
            orpt.DataBind();
            
            #endregion

        }
    }

    //为了使用repeater显示,特意定义的类
    public class OtherByRpt
    {
        private string title;

        public string Title
        {
            get { return title; }
            set { title = value; }
        }
        private string appendinfo;

        public string Appendinfo
        {
            get { return appendinfo; }
            set { appendinfo = value; }
        }
        private ChartsDataLists rptlists;

        public ChartsDataLists Rptlists
        {
            get { return rptlists; }
            set { rptlists = value; }
        }
    }
}

 6.实现效果图 点击查看(隐藏)效果图  :

说明:以上是简单的介绍,控件的许多属性和数据的定义还未详细列出(该控件可能功能还是不是很强大,但是基本的数据可以实现)