
正文
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 = ; i < str1.Split(';').Length; i++)
{
UserList1.Add(new Users
{
Name = str1.Split(';')[i],
Number = Convert.ToDouble(str2.Split(';')[i]),
});
}
for (int i = ; 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;
}
}
}
}
}
效果图:







