【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博，没什么经验，主要是把最近自己对Dev的一些研究贴出来大家共同探讨，有不足之处望大家帮忙斧正。
WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。
先贴出几张WebChartControl生成的图表：
Web页面代码WebChartControl.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %> <%@ Register Assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %> <%@ Register assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="500px" Height="350px">
</dxchartsui:WebChartControl> <dxchartsui:WebChartControl ID="WebChartControl3" runat="server" Width="500px" Height="350px">
</dxchartsui:WebChartControl>
<dxchartsui:WebChartControl ID="WebChartControl2" runat="server" Width="500px" Height="350px">
</dxchartsui:WebChartControl>
<dxchartsui:WebChartControl ID="WebChartControl4" runat="server" Width="500px" Height="350px">
</dxchartsui:WebChartControl>
</div>
</form>
</body>
</html>
Web页面后台代码WebChartControl.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using DevExpress.XtraCharts;
using System.Drawing; namespace DevDemo
{
public partial class WebChartControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.DrawBar();
this.DrawLine();
this.DrawPie();
this.DrawBarAndLine();
} /// <summary>
/// 绘制柱状图
/// </summary>
private void DrawBar()
{ ChartServices.SetChartTitle(this.WebChartControl1, true, "2012年12月第1周收入情况", true, , StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", , FontStyle.Bold), Color.Red, ); //如不需显示图表标题可不用调用本段代码，下同
ChartServices.DrawChart(this.WebChartControl1, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
ChartServices.DrawChart(this.WebChartControl1, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
ChartServices.SetAxisX(this.WebChartControl1, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", , FontStyle.Bold)); //如不需显示X轴标题，可不调用该行代码，下同
ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", , FontStyle.Bold)); //如不需显示Y轴标题，可不调用该行代码，下同
} /// <summary>
/// 绘制折线图
/// </summary>
private void DrawLine()
{
ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, , StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", , FontStyle.Bold), Color.Red, );
ChartServices.DrawChart(this.WebChartControl3, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
ChartServices.DrawChart(this.WebChartControl3, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
ChartServices.SetAxisX(this.WebChartControl3, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", , FontStyle.Bold));
ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", , FontStyle.Bold));
} /// <summary>
/// 柱状图和折线图在同一图表中
/// </summary>
private void DrawBarAndLine()
{
ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, , StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", , FontStyle.Bold), Color.Red, );
ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", , FontStyle.Bold));
ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", , FontStyle.Bold)); ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, , StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", , FontStyle.Bold), Color.Red, );
ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", , FontStyle.Bold));
ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", , FontStyle.Bold));
} /// <summary>
/// 绘制饼图
/// </summary>
private void DrawPie()
{
ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, , StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", , FontStyle.Bold), Color.Red, );
ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[][].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money");
}
}
}
数据提供类ServiceData.cs，主要作用为图表控件提供数据源
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data; namespace DevDemo
{
public static class ServiceData
{
/// <summary>
/// 获取一周收入和支出数据
/// </summary>
/// <returns>Datatable数据集合(可从数据库读取以datatable形式返回，此处为演示方便直接构造)</returns>
public static DataTable GetWeekMoneyAndCost()
{
DataTable dt = new DataTable();
dt.Columns.Add("week", typeof(string));
dt.Columns.Add("money", typeof(decimal));
dt.Columns.Add("cost", typeof(decimal)); dt.Rows.Add("星期一", ,);
dt.Rows.Add("星期二", ,);
dt.Rows.Add("星期三", ,);
dt.Rows.Add("星期四", ,);
dt.Rows.Add("星期五", ,);
dt.Rows.Add("星期六", ,);
dt.Rows.Add("星期日", ,);
return dt;
}
}
}
图表控件辅助类ChartServices.cs，控制生成图表
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using DevExpress.XtraCharts;
using System.Data; namespace DevDemo
{
public static class ChartServices
{
/// <summary>
/// 绘制图形
/// </summary>
/// <param name="control">图表控件</param>
/// <param name="seriesName">系列名</param>
/// <param name="type">类型</param>
/// <param name="dt">数据源</param>
/// <param name="column1"></param>
/// <param name="column2"></param>
public static void DrawChart(DevExpress.XtraCharts.Web.WebChartControl control, string seriesName, ViewType type, DataTable dt, string column1, string column2)
{
Series series = new Series(seriesName, type);
DataTable table = dt;
SeriesPoint point=null;
for (int i = ; i < table.Rows.Count; i++)
{
point= new SeriesPoint(table.Rows[i][column1].ToString(), Convert.ToDouble(table.Rows[i][column2].ToString()));
series.Points.Add(point);
}
control.Series.Add(series);
//针对饼图的特殊处理
if(type==ViewType.Pie)
{
//设置显示方式(Argument:显示图例说明，ArgumentAndValues:显示图例内容和数据)
series.Label.PointOptions.PointView = PointView.ArgumentAndValues;
//设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法)
series.Label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent;
//数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数)
series.Label.PointOptions.ValueNumericOptions.Precision = ; //数据以百分比显示时只能是Default和None
((PieSeriesLabel)series.Label).ResolveOverlappingMode =ResolveOverlappingMode.Default;
}
} /// <summary>
/// 设置图表标题
/// </summary>
/// <param name="control">图表控件</param>
/// /// <param name="isVisible">标题是否可见</param>
/// <param name="text">标题文本</param>
/// <param name="isWordWrop">是否换行</param>
/// <param name="maxLineCount">最大允许行数</param>
/// <param name="alignment">对齐方式</param>
/// <param name="dock">位置</param>
/// <param name="isAntialiasing">是否允许设置外观</param>
/// <param name="font">字体</param>
/// <param name="textColor">文本颜色</param>
/// <param name="indent">字体缩进值</param>
public static void SetChartTitle(DevExpress.XtraCharts.Web.WebChartControl control,bool isVisible,String text, bool isWordWrop, int maxLineCount, StringAlignment alignment, ChartTitleDockStyle dock, bool isAntialiasing, Font font, Color textColor, int indent)
{
//设置标题
ChartTitle title = new ChartTitle();
title.Visible = isVisible;
//显示文本
title.Text = text;
//是否允许换行
title.WordWrap = isWordWrop;
//最大允许行数
title.MaxLineCount = maxLineCount;
//对齐方式
title.Alignment = alignment;
//位置
title.Dock = dock;
//是否允许设置外观
title.Antialiasing = isAntialiasing;
//字体
title.Font = font;
//字体颜色
title.TextColor = textColor;
//缩进值
title.Indent = indent;
control.Titles.Add(title);
} /// <summary>
/// 为X轴添加标题
/// </summary>
/// <param name="control">图形控件</param>
/// <param name="isVisible">标题是否可见</param>
/// <param name="aligment">对齐方式</param>
/// <param name="text">标题显示文本</param>
/// <param name="color">标题字体颜色</param>
/// <param name="isAntialiasing">是否允许设置外观</param>
/// <param name="font">字体</param>
public static void SetAxisX(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font)
{
XYDiagram xydiagram = (XYDiagram)control.Diagram;
xydiagram.AxisX.Title.Visible = isVisible;
xydiagram.AxisX.Title.Alignment = aligment;
xydiagram.AxisX.Title.Text = text;
xydiagram.AxisX.Title.TextColor = color;
xydiagram.AxisX.Title.Antialiasing = isAntialiasing;
xydiagram.AxisX.Title.Font = font;
} /// <summary>
/// 为X轴添加标题
/// </summary>
/// <param name="control">图形控件</param>
/// <param name="isVisible">标题是否可见</param>
/// <param name="aligment">对齐方式</param>
/// <param name="text">标题显示文本</param>
/// <param name="color">标题字体颜色</param>
/// <param name="isAntialiasing">是否允许设置外观</param>
/// <param name="font">字体</param>
public static void SetAxisY(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font)
{
XYDiagram xydiagram = (XYDiagram)control.Diagram;
xydiagram.AxisY.Title.Visible = isVisible;
xydiagram.AxisY.Title.Alignment = aligment;
xydiagram.AxisY.Title.Text = text;
xydiagram.AxisY.Title.TextColor = color;
xydiagram.AxisY.Title.Antialiasing = isAntialiasing;
xydiagram.AxisY.Title.Font = font;
}
}
}
以上为本人的一点小小研究，如有不足之处，望不吝赐教！
转自：http://www.cnblogs.com/huabao-wei/archive/2012/12/17/DevWebChartControl.html
【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)的更多相关文章
- ZedGrap控件绘制图表曲线
问题描述: 使用C#中ZedGrap控件绘制图表曲线图 ZedGrap 介绍说明: 安装ZedGrap控件 ZedGraph控件dll文件: 添加ZedGraph控件,首先在新建立的C#图像工 ...
- Devexpress中WebChartControl控件柱状统计图的做法（数据为调用存储过程）
//前台控件代码:WebChartControl控件: <%-- 月采购量统计--%> <dxchartsui:WebChartControl ID="WebChartCo ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- WinForm DevExpress使用之ChartControl控件绘制图表一——基础
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- WinForm DevExpress使用之ChartControl控件绘制图表二——进阶
1. 多坐标折线图 在这个项目中,我需要做不同采集地方和不同数据类型的数据对比,自然而然就用到了多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过项目中的实际例子介绍多重 ...
- High-speed Charting Control--MFC绘制图表（折线图、饼图、柱形图）控件
原文地址:https://www.codeproject.com/articles/14075/high-speed-charting-control 本文翻译在CodeProject上的介绍(主要还 ...
- iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）
1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...
随机推荐
- Effective C++ 条款45
本节条款的题目是运用成员模板接受全部兼容类型 作者阐述自己的观点是通过智能指针的样例. 在学习本节条款之前我们要先明确关于隐式转化的问题 例如以下代码: #include<iostream> ...
- POJ 3104 Drying 二分
http://poj.org/problem?id=3104 题目大意: 有n件衣服,每件有ai的水,自然风干每分钟少1,而烘干每分钟少k.求所有弄干的最短时间. 思路: 注意烘干时候没有自然风干. ...
- oracle 基础SQL语句 多表查询 子查询 分页查询 合并查询 分组查询 group by having order by
select语句学习 . 创建表 create table user(user varchar2(20), id int); . 查看执行某条命令花费的时间 set timing on: . 查看表的 ...
- 关于Git的分支
分支是代码管理的利器.如果没有有效的分支管理.代码管理就适应不了复杂的开发过程和 项目的需要. 分支命令概述: 在Git中分支管理使用命令git branch.该命令的主要用法如下: 用法一: git ...
- 面试学到的css布局，细节影响了我的面试成绩
这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...
- SpringMVC与Struts2配置区别
Spring MVC模型与Struts2模型应用: Html表单: 上述这两段代码无论是SpringMVC还是Struts2,都可以共用.而在请求响应处理类(也就是Controller)上的设计差 ...
- Servlet原理
Servlet主要用来处理客户端请求并将其结果发送到客户端,下面我们来详细看一下Servlet. 一.Servlet的生命周期 Servlet的生命周期是由Servlet的容器来控制的(Tomcat ...
- 理解JavaScript原型式继承
0.基础 javascript没有类的概念, javascript不需要实例化某个具体类的实例.javascript对象本身可以用来创建对象, 而对象可以继承自其他对象, 这个概念称为原型式继承 每个 ...
- （转）（contant的一些用法）
主要就是增加约束的 以下几种约束 .并 一一列举: 1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码 要对 ...
- Android屏幕适配－资源文件夹命名与匹配规则
说明:本文档目的为分析android工程res目录下的资源文件夹(drawable,values,layout等)在屏幕适配方面的限定与适配方法. 1. Res下文件夹命名方式 1. 可用的命名属性 ...