Devexpress中WebChartControl控件柱状统计图的做法(数据为调用存储过程)
//前台控件代码:WebChartControl控件:
<%-- 月采购量统计--%>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="700px" Height="400px" CssClass="chartsui"></dxchartsui:WebChartControl>
后台代码(cs)可写在自定义方法中:
// 柱状图里的第一个柱
Series Series1 = new Series("金额", ViewType.Bar);
Series1.DataSource = dt;
Series1.ArgumentScaleType = ScaleType.Qualitative;
// 以哪个字段进行显示
Series1.ArgumentDataMember = "ymonth";
Series1.ValueScaleType = ScaleType.Numerical;
// 柱状图里的柱的取值字段
Series1.ValueDataMembers.AddRange(new string[] { "SUM(AMONEY)" });
// 柱状图里的第二柱
Series Series2 = new Series("采购数量", ViewType.Bar);
Series2.DataSource = dt;
Series2.ArgumentScaleType = ScaleType.Qualitative;
Series2.ArgumentDataMember = "ymonth";
Series2.ValueScaleType = ScaleType.Numerical;
Series2.ValueDataMembers.AddRange(new string[] { "sum(buynum)" });
ChartServices.SetChartTitle(this.WebChartControl1, true, "采购量图表统计", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10); //显示图表标题
for (int i = 0; i < dt.Rows.Count; i++)
{
// string tt = dt.Rows[i]["ymonth"].ToString();
SeriesPoint point1 = new SeriesPoint(dt.Rows[i]["ymonth"].ToString(), Convert.ToDouble(dt.Rows[i]["SUM(AMONEY)"].ToString()));
SeriesPoint point2 = new SeriesPoint(dt.Rows[i]["ymonth"].ToString(), Convert.ToDouble(dt.Rows[i]["sum(buynum)"].ToString()));
Series1.Points.Add(point1);
Series2.Points.Add(point2);
}
WebChartControl1.Series.Add(Series1);
WebChartControl1.Series.Add(Series2);
ChartServices类文件代码(用于设置WebChartControl中标题,颜色、值等属性)--一般在前端WebChartControl有自带的属性,有时点不出来时,则可以引用。
class ChartServices
{
///
/// 绘制图形
///
/// 图表控件
/// 系列名
/// 类型
/// 数据源
///
///
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 = 0; 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 = 0;
//数据以百分比显示时只能是Default和None
((PieSeriesLabel)series.Label).ResolveOverlappingMode = ResolveOverlappingMode.Default;
}
}
///
/// 设置图表标题
///
/// 图表控件
/// /// 标题是否可见
/// 标题文本
/// 是否换行
/// 最大允许行数
/// 对齐方式
/// 位置
/// 是否允许设置外观
/// 字体
/// 文本颜色
/// 字体缩进值
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);
}
///
/// 为X轴添加标题
///
/// 图形控件
/// 标题是否可见
/// 对齐方式
/// 标题显示文本
/// 标题字体颜色
/// 是否允许设置外观
/// 字体
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;
}
///
/// 为X轴添加标题
///
/// 图形控件
/// 标题是否可见
/// 对齐方式
/// 标题显示文本
/// 标题字体颜色
/// 是否允许设置外观
/// 字体
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;
}
}