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

// function body_load(){var bw;var bh;bw = window.document.documentElement.clientWidth;bh = window.document.documentElement.clientHeight;var fddiv = window.document.createElement("div");fddiv.style.padding = "3px";fddiv.style.width = "330px";fddiv.style.height = "53px";fddiv.style.position = "fixed";fddiv.style.right = 0 + "px";fddiv.style.bottom = 0 + "px";fddiv.innerHTML = '

关注我

收藏

顶

';window.document.body.appendChild(fddiv);}window.onload = function (){body_load();};
// ]]>

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

控件 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.实现效果图 点击查看(隐藏)效果图 :

// function viewshow(){
if(document.getElementById("imgdiv").style.display == "none"){
document.getElementById("imgdiv").style.display = "block";
}else{
document.getElementById("imgdiv").style.display = "none";
}
}
// ]]>



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