Aspx折线图、柱状图示例(Web Chart)


提示:这是一篇2007年的学 习记录,最近在整理博客,之前在CSDN上有一个,之后在博客园上有一个,零零散散的,CSDN已若干年不上了,博客园也就用手机看看新闻,突然发现自己 快写了十年代码,突然在过了而立之年后觉得特迷茫,何去?何从?好吧不扯远了,往后会陆陆续续整理些博客文章,把之前记录的一些,体会的一些,经历的一 些,在这里帖出来,算对自己过去的一些回忆吧。以下是2007年的原文:

项目中有报表图形化的需求, 于是开始在网上找第三方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(165, 0, 16);
chart.YAxisFont.ForeColor
= Color.FromArgb(165, 0, 16);
chart.XAxisFont.ForeColor
= Color.FromArgb(165, 0, 16);
//内部线条
chart.Border.Color = Color.FromArgb(200, 200, 200);
//边框样式
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,上面还有很多效果和代码示例,包括扇形图等,上周在.Net Framework 4.0下测试了一下,仍然能用。
优质内容筛选与推荐>>
1、Python Twisted 学习系列22(转载stulife最棒的Twisted入门教程)
2、MySQL 日志的类型
3、set集合,深浅拷贝
4、100行代码实现最简单的基于FFMPEG+SDL的视频播放器
5、hdu4339 Query(multiset 或 线段树)


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn