C# WPF DevExpress 图表控件之柱状图

 

说明：DevExpress版本是17.1。VS是2015。

XAML:

<!--#region 图表控件-->
        <dxc:ChartControl x:Name="chartControl1">

            <!--#region 图表控件的说明板块-->
            <dxc:ChartControl.Legend>

                <!--#region 说明-->
                <dxc:Legend Background="#fff"/>
                <!--#endregion -->
                
            </dxc:ChartControl.Legend>
            <!--#endregion -->

            <!--#region 图表控件的主题/标题-->
            <dxc:ChartControl.Titles>
                <dxc:Title FontSize="14" FontFamily="微软雅黑" Foreground="#333" Content="XXX" HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <!--#endregion -->

            <!--#region 2D图型-->
            <dxc:XYDiagram2D SeriesDataMember="Name" BorderThickness="0">

                <!--#region 2D图的 X 轴-->
                <dxc:XYDiagram2D.AxisX>

                    <!--#region 2D X 轴-->
                    <dxc:AxisX2D x:Name="BaraxisX">

                        <!--#region X 轴单位-->
                        <dxc:AxisX2D.CustomLabels>
                            <dxc:CustomAxisLabel Content="0" Value="0"/>
                        </dxc:AxisX2D.CustomLabels>
                        <!--#endregion-->

                    </dxc:AxisX2D>
                    <!--#endregion-->

                </dxc:XYDiagram2D.AxisX>
                <!--#endregion -->

                <!--#region 2D 图的 Y轴-->
                <dxc:XYDiagram2D.AxisY>
                    
                    <!--#region 2D Y 轴-->
                    <dxc:AxisY2D>

                        <!--#region Y 轴单位-->
                        <dxc:AxisY2D.CustomLabels>
                            <dxc:CustomAxisLabel Content="0" Value="0"/>
                            <dxc:CustomAxisLabel Content="300000" Value="300000"/>
                        </dxc:AxisY2D.CustomLabels>
                        <!--#endregion-->

                        <!--#region Y 轴标题-->
                        <dxc:AxisY2D.Title>
                            <dxc:AxisTitle Content="单位：亩" />
                        </dxc:AxisY2D.Title>
                        <!--#endregion-->

                        <!--#region Y 最大最小值设置-->
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range MaxValue="600000" MinValue="0" AutoSideMargins="False"/>
                        </dxc:AxisY2D.WholeRange>
                        <!--#endregion-->

                    </dxc:AxisY2D>
                    <!--#endregion -->

                </dxc:XYDiagram2D.AxisY>
                <!--#endregion -->

                <!--#region 2D图型的层级/系列-->
                <dxc:XYDiagram2D.Series>
                    
                    <!--#region 横杆边系列2D-->
                    <!--ArgumentDataMember存放的是后台表中的一个字段Name-->
                    <!--ValueDataMember存放的是后台表中的一个字段Number-->
                    <!--Brush是用来设置柱形图的颜色-->
                    <!--DisplayName是此柱状图类型的名称-->
                    <dxc:BarSideBySideSeries2D x:Name="qwe" DisplayName="面积A" ArgumentDataMember="Name" ValueDataMember="Number" Brush="#EDA112">
                        
                        <!--#region 系列点/柱状图型-->
                        <!--Argument是此柱形图的说明/简介-->
                        <!--Value是此柱形图的值，决定了在整块图中的高度-->
                        <!--<dxc:SeriesPoint Argument="林地面积" Value="30000"/>-->
                        <!--#endregion -->

                    </dxc:BarSideBySideSeries2D>
                    <!--#endregion-->

                    <!--#region 横杆边系列2D-->
                    <!--同上-->
                    <dxc:BarSideBySideSeries2D x:Name="ewq" DisplayName="面积B" ArgumentDataMember="Name" ValueDataMember="Number" Brush="#7C2E16">
                        
                        <!--同上-->
                        <!--<dxc:SeriesPoint Argument="农田" Value="30000"/>-->
                        
                    </dxc:BarSideBySideSeries2D>
                    <!--#endregion-->

                </dxc:XYDiagram2D.Series>
                <!--#endregion-->

            </dxc:XYDiagram2D>
            <!--#endregion -->

        </dxc:ChartControl>
        <!--#endregion -->

 

后台隐藏代码：

using DevExpress.Xpf.Charts;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfAppFirst
{
    /// <summary>
    /// Histogram.xaml 的交互逻辑
    /// </summary>
    public partial class Histogram : Window
    {
        //定义两个 类 ToList();
        List<Users> UserList1 = new List<Users>();
        List<Users> UserList2 = new List<Users>();

        /// <summary>
        /// 构造函数
        /// </summary>
        public Histogram()
        {
            #region 构造的数据
            Users us = new Users();
            string str1 = "Z地;A地;Y地;B地;X地;C地;W地;D地;V地;E地;U地;F地;T地";
            string str2 = "510000;450000;114000;54000;120000;60000;30000;12000;0;0;0;0;0";
            string str3 = "540000;450000;294000;126000;126000;60000;42000;12000;0;0;0;0;0";
            #endregion

            #region 向列表中添加构造的数据
            for (int i = 0; i < str1.Split(';').Length; i++)
            {
                UserList1.Add(new Users
                {
                    Name = str1.Split(';')[i],
                    Number = Convert.ToDouble(str2.Split(';')[i]),
                });
            }
            for (int i = 0; i < str1.Split(';').Length; i++)
            {
                UserList2.Add(new Users
                {
                    Name = str1.Split(';')[i],
                    Number = Convert.ToDouble(str3.Split(';')[i]),
                });
            }
            #endregion

            InitializeComponent();
        }

        /// <summary>
        /// 窗体加载时事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //将数据绑定到柱状图的BarSideBySideSeries2D 中
            this.qwe.DataSource = UserList1;
            this.ewq.DataSource = UserList2;
        }

        /// <summary>
        /// 自定义类
        /// </summary>
        public class Users
        {
            private string name;
            private double number;

            public string Name
            {
                get
                {
                    return name;
                }

                set
                {
                    name = value;
                }
            }

            public double Number
            {
                get
                {
                    return number;
                }

                set
                {
                    number = value;
                }
            }
        }
    }
}

效果图：