Code Bye

DevExpress ChartControl设置显示Series值

码拜

通过代码设置：

//设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法)

chartBar.Series[2].Label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent;

//数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数)
 chartBar.Series[2].Label.PointOptions.ValueNumericOptions.Precision = 1;

//显示

chartBar..Series[2].LabelsVisibility=true;

附：

使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。

 

Web页面代码WebChartControl.aspx：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %>
       
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v11.2.Export, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGridView.Export" TagPrefix="dx" %>
       
<%@ 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>
        <br />
        <asp:Button ID="btnExport" runat="server" Text="导出" onclick="btnExport_Click" />
    </div> 
    </form>
</body>
</html>

Web页面后台代码WebChartControl.aspx.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);    //如不需显示图表标题可不用调用本段代码，下同
            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("宋体", 12, FontStyle.Bold));   //如不需显示X轴标题，可不调用该行代码，下同
            ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));   //如不需显示Y轴标题，可不调用该行代码，下同
        }
      
        /// <summary>
        /// 绘制折线图
        /// </summary>
        private void DrawLine()
        {
            ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
            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("宋体", 12, FontStyle.Bold));
            ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
        }
      
        /// <summary>
        /// 柱状图和折线图在同一图表中
        /// </summary>
        private void DrawBarAndLine() 
        {
            ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
            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("宋体", 12, FontStyle.Bold));
            ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
      
            ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
            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("宋体", 12, FontStyle.Bold));
            ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
        }
      
        /// <summary>
        /// 绘制饼图
        /// </summary>
        private void DrawPie()
        {
            ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
            ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[0][0].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money");
        }
    }
}

数据提供类ServiceData.cs，主要作用为图表控件提供数据源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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("星期一", 1200,400);
            dt.Rows.Add("星期二", 1800,750);
            dt.Rows.Add("星期三", 890,320);
            dt.Rows.Add("星期四", 1080,290);
            dt.Rows.Add("星期五", 2800,1020);
            dt.Rows.Add("星期六", 3200,1260);
            dt.Rows.Add("星期日", 4500,2320);
            return dt; 
        }
    }
}

图表控件辅助类ChartServices.cs，控制生成图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DevExpress.XtraCharts;
using System.Drawing;
using System.Data;
      
namespace DevWinForm
{
    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(ChartControl 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;
            }
        }
      
        /// <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(ChartControl 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(ChartControl 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(ChartControl 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

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明DevExpress ChartControl设置显示Series值！