原创 ASP.net[2.0示例]实现折线,柱状,扇形图--web chart控件收藏

新一篇: 一些SQL Server的应用实例 | 旧一篇: 移动梦网MISC1.6正反向订购/取消

项目中有报表图形化的需求, 于是开始在网上找第三方chart控件。因时间紧迫,在CSDN中搜了几轮后大至确定了几个候选:一、Office带的OWC控件;二、ComponentOne;三、Web Chart。

OWC似乎使用者居多,但看见有网友在帖中抱怨OWC在使用时需要许可证书,于是将其排除,我可不想BOSS在看报表时弹出一个“没有许可证书”的窗口。

接着找到了ComponentOne的Web chart做出的各种效果图,效果极佳。我一下子被迷住了,决定就是它,于是马不停蹄的下了最新版100多M的安装文件,又花一上午找了个可以用的注册码,再找了篇教程,OK万事俱备,兴匆匆的开始写代码。需求不复杂,在一个页面上画出多条折线图即可,根据以往经验,这种大型商业共享软件在官方站点上看两个Example顶多一小时绝对能搞定的。但结果让我非常的恼火,官方的Example简单的它偏不提供,弄些什么AJAX的,一大堆实现辅助效果的代码,你要找的核心的那三四行打死也找不到,好像就怕你一下子把它的Example看明白了。历来讨厌这种软件。于是卸载、删除......等全部弄完,一天过去了。

还好,后来找到了Web Chart。代码超简洁,效果也还不错,写些简单的示例供大家参考:

一、折线图

  

//引用命名空间
using WebChart;

//定义一个颜色数组,供循环时为不同的记录填充不同的颜色
private string[] myColor = new string[]
{
    
"Tomato",//西红柿
    "Black",
    
"Gold",
    
"Blue",
    
"Green",
    
"Orange",
    
"Pink",//粉红
    "Violet",//紫罗兰
    "Orchid",//淡紫色
    "Lime",//亮绿
    "Tan",//茶色
    "Red",
    
"Navy"//橘红
};

//用静态方式示例了画出一条两个点的最简单折线.实际项目据此做循环而以.
private void doIt()
{
    
//创建折线对象
    LineChart myChart = new LineChart();
    
//为折线填充颜色
    myChart.Line.Color = Color.FromName(myColor[0]);
    myChart.Fill.Color 
= Color.FromName(myColor[0]);
    myChart.LineMarker 
= new DiamondLineMarker(8, Color.FromName(myColor[0]), Color.FromName(myColor[0]));
    
//图例说明
    myChart.Legend = "折线一";
    
//添加第一个点,参数一为x座标上的名称,参数二为y座标上的值
    myChart.Data.Add(new ChartPoint(""float.Parse("100")));
    
//添加第二个点
    myChart.Data.Add(new ChartPoint(""float.Parse("200")));
    
//chart为控件ID
    this.chart.Charts.Add(myChart);
    
this.chart.RedrawChart();
}

二、柱状图

//颜色数组
private string[] myColor = new string[]
{
    
"Fuchsia",
    
"Black",
    
"Gold",
    
"Blue",
    
"HotPink",
    
"Orange",
    
"Peru",
    
"DodgerBlue",
    
"Lime",
    
"Tan",
    
"Red",
    
"GreenYellow",
    
"DarkGreen",
    
"DimGray",
    
"Orchid"
};

//调用该方法生成柱状图
private void bindchart()
{
    
//获取一个DataTable,具体函数略...
    DataTable dt = this.getdt();
    
if (dt != null)
    {
        
if (dt.Rows.Count > 0)
        {
            
//遍历DataTable为每条记录生成一个柱状
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                
//创建对象
                ColumnChart mychart = new ColumnChart();
                
//设置柱子宽度
                mychart.MaxColumnWidth = 48;
                
//颜色
                mychart.Fill.Color = Color.FromName(this.myColor[i]);
                
//在柱子上显示数量
                mychart.DataLabels.Visible = true;
                
//数量的字体
                mychart.DataLabels.Font = new Font("Verdana"14);
                
//添加
                mychart.Data.Add(new ChartPoint(""float.Parse(dt.Rows[i]["num"].ToString())));
                
//备注
                mychart.Legend = dt.Rows[i]["name"].ToString();
                
this.chart.Charts.Add(mychart);
            }
            
//辅助设置
            
//背景色
            chart.Background.Color = Color.FromArgb(165016);
            chart.YAxisFont.ForeColor 
= Color.FromArgb(165016);
            chart.XAxisFont.ForeColor 
= Color.FromArgb(165016);
            
//内部线条
            chart.Border.Color = Color.FromArgb(200200200);
            
//边框样式
            chart.BorderStyle = BorderStyle.None;
            
//y最大值
            double max = double.Parse(dt.Compute("MAX(num)","").ToString());
            
//递增值
            int intv = 2;

            
//数量小于16的情况
            if (max < 16)
            {
                max 
= 16;
            }
            
//大于16的情况
            else
            {
                intv 
= int.Parse(Math.Ceiling(max/8).ToString());
                max 
+= intv;
            }

            
//设置Y轴终点值
            chart.YCustomEnd = int.Parse(max.ToString());
            
//y递增值
            chart.YValuesInterval = intv;

            
//生成
            this.chart.RedrawChart();
        }
    }
}

 

Web Chart为免费控件,需要的朋友可去官方地址下载:http://www.carlosag.net/Tools/WebChart/Default.aspx,上面还有很多效果和代码示例。

未完待续(最近太忙,很少时间写Blog,见谅)......

发表于 @ 2007年01月22日 18:11:00|评论(loading...)|编辑

新一篇: 一些SQL Server的应用实例 | 旧一篇: 移动梦网MISC1.6正反向订购/取消

评论

#cyc09156 发表于2007-01-31 11:12:25  IP: 125.78.20.*
web chart控件在哪下的?能给个地址吗,或发给我,谢谢啊
qq:272194550
email:cyc09156@163.com
#eb5mj 发表于2007-02-28 16:28:10  IP: 218.249.81.*
请问那个控件我怎么注册才能显示在工具箱中呢?工具箱中没有的话我怎么添加这个控件啊?
#eb5mj 发表于2007-02-28 16:43:33  IP: 218.249.81.*
我知道了,是我没有仔细看人家的FAQ,谢谢!
#kzbbadboy 发表于2007-04-25 13:45:28  IP: 219.137.245.*
我的折线图中怎么会第一个点和最后一个点总是要下或一条线的到X轴的,而且他们之间会出现空白,知道的请回谢谢!!
#michaelowenii 发表于2007-07-15 15:32:52  IP: 124.243.195.*
应该可以做 饼图吧,我去看看
#michaelowenii 发表于2007-07-15 17:06:23  IP: 124.243.195.*
可以做饼图的,可是没有办法显示 每个扇区所占的百分比。

楼主,你知道怎么显示 每个扇区所占的百分比?

如果知道麻烦您告知我一下:谢谢!!

zhanghongdao@gmail.om
#Cherish20 发表于2007-10-18 17:09:47  IP: 218.104.36.*
我在官方网站上下载了该控件,已经加载到工具箱了,
可不能拖到程序程序中,郁闷,
大家知道什么原因吗?
#dorishappy 发表于2007-10-25 11:21:05  IP: 124.78.179.*
请问各位朋友如何让Y轴显示为百分比呢?我算出来的是小数就是转不了百分比,郁闷中!请帮忙!谢谢!msn--zhaoru88@hotmail.com
#dorishappy 发表于2007-10-25 11:24:55  IP: 124.78.179.*
请问各位朋友如何让Y轴显示为百分比呢?我算出来的是小数就是转不了百分比,郁闷中!请帮忙!谢谢!msn--zhaoru88@hotmail.com
#lizhengqin 发表于2007-11-21 15:06:55  IP: 211.157.16.*
问一下,如何画饼图
#lizhengqin 发表于2007-11-23 11:31:57  IP: 211.157.16.*
请问谁有画饼图的代码共享一下,谢谢!



chf7890@gmail.com
#qxs 发表于2008-01-15 15:29:52  IP: 124.207.16.*
大哥,你这个控件this.chart
是怎么弄的,可以告诉我吗
qxs_qxs@hotmail.com
#Richard_xia 发表于2008-02-02 13:16:37  IP: 125.33.48.*
有谁知道画饼图,加上百分比吗?chart.DataLabels.NumberFormat:='P';则结果值乘100%,而不是占百分比形式显示的。有谁知道的?Richard_xia@126.com
先谢谢了。
#xibeiwanglang 发表于2008-03-26 20:44:37  IP: 222.90.74.*
//设置Y轴终点值
chart.YCustomEnd = int.Parse(max.ToString());


应该是:

chart.YCustomEnd = float.Parse(max.ToString());
#zhangkai 发表于2008-04-30 12:12:49  IP: 60.28.75.*
怎么让柱子下显示名字,跪求了,@@38817556
mail:they@eyou.com
发表评论  


登录
Csdn Blog version 3.1a
Copyright © hello world