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.實現效果圖 點擊查看(隱藏)效果圖  :

 

說明:以上是簡單的介紹,控件的許多屬性和數據的定義還未詳細列出(該控件可能功能還是不是很強大,但是基本的數據可以實現)