Devexpress系列一 之 ChartControl 柱形图BarSideBySideSeries2D
这一篇是讲的是简单的柱形图，
柱形图运行效果如下图：
新建WPF窗体应用程序后（WPF用户控件也可以），工程引用DevExpress.Xpf.Charts.v17.1.dll，
在XAML头部引用名称 xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
XAML代码如下：
<Window x:Class="DashBoardNavigationDemo.BarChartWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" xmlns:local="clr-namespace:DashBoardNavigationDemo" mc:Ignorable="d" Title="BarChartWindow" Loaded="Window_Loaded"> <Grid Name="barChartGrid" Background="#262A4D" > <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Background="#2B3059"> <TextBlock Text="工序投入产出柱形图" FontSize="15" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0,0,0"/> </Grid> <Grid Grid.Row="1"> <dxc:ChartControl Name="barChart" AnimationMode="OnLoad" BorderBrush="#262A4D" Background="#262A4D" Margin="-4,10,10,-2" Padding="0,0,0,0"> <dxc:ChartControl.Legend> <dxc:Legend Background="#262A4D" Visible="True" HorizontalPosition="Right" VerticalPosition="TopOutside" Orientation="Horizontal" FontSize="12" Margin="0" Padding="0" BorderThickness="0" > </dxc:Legend> </dxc:ChartControl.Legend> <dxc:ChartControl.Diagram> <dxc:XYDiagram2D EnableAxisXNavigation="False" BarDistance="0"> <dxc:XYDiagram2D.Series> <dxc:BarSideBySideSeries2D Name="BarSideSerie" Brush="#FFFF00" DisplayName="投入" LabelsVisibility="True" AnimationAutoStartMode="SetStartState"> <dxc:BarSideBySideSeries2D.Model> <dxc:BorderlessSimpleBar2DModel/> </dxc:BarSideBySideSeries2D.Model> <dxc:BarSideBySideSeries2D.Label> <dxc:SeriesLabel Foreground="Red" dxc:BarSideBySideSeries2D.LabelPosition="Outside" HorizontalAlignment="Center" VerticalAlignment="Center"/> </dxc:BarSideBySideSeries2D.Label> </dxc:BarSideBySideSeries2D> <dxc:BarSideBySideSeries2D Name="BarSideSerie2" Brush="#0909F7" DisplayName="产出" Foreground="WhiteSmoke" LabelsVisibility="True" AnimationAutoStartMode="SetStartState"> <dxc:BarSideBySideSeries2D.Model> <dxc:BorderlessSimpleBar2DModel/> </dxc:BarSideBySideSeries2D.Model> <dxc:BarSideBySideSeries2D.Label> <dxc:SeriesLabel dxc:BarSideBySideSeries2D.LabelPosition="Outside" ConnectorVisible="False" ResolveOverlappingMode="Default" Indent="20" dxc:MarkerSeries2D.Angle="90" Visible="True"> <dxc:SeriesLabel.ElementTemplate> <DataTemplate> <Border Background="Transparent" Opacity="0.75" CornerRadius="2"> <StackPanel> <TextBlock Text="{Binding Path=Text}" Foreground="Red"/> </StackPanel> </Border> </DataTemplate> </dxc:SeriesLabel.ElementTemplate> </dxc:SeriesLabel> </dxc:BarSideBySideSeries2D.Label> </dxc:BarSideBySideSeries2D> </dxc:XYDiagram2D.Series> <dxc:XYDiagram2D.AxisX> <dxc:AxisX2D x:Name="_AxisX" Visible="True" Brush="#3c3e71" TickmarksMinorVisible="False" GridLinesMinorVisible="False" GridLinesVisible="False"> <dxc:AxisX2D.CrosshairAxisLabelOptions> <dxc:CrosshairAxisLabelOptions /> </dxc:AxisX2D.CrosshairAxisLabelOptions> <dxc:AxisX2D.Label> <dxc:AxisLabel Foreground="WhiteSmoke" Padding="0,1" FontSize="12"/> </dxc:AxisX2D.Label> </dxc:AxisX2D> </dxc:XYDiagram2D.AxisX> <dxc:XYDiagram2D.AxisY > <dxc:AxisY2D x:Name="_AxisY" GridLinesMinorVisible="True"> <dxc:AxisY2D.Label> <dxc:AxisLabel Foreground="WhiteSmoke" FontSize="12"/> </dxc:AxisY2D.Label> <dxc:AxisY2D.Title> <dxc:AxisTitle Visible="True" Content="产量, 万片"/> </dxc:AxisY2D.Title> </dxc:AxisY2D> </dxc:XYDiagram2D.AxisY> <dxc:XYDiagram2D.DefaultPane> <dxc:Pane Name="DefaultPaneBackground" DomainBorderBrush="#262A4D" DomainBrush="#262A4D"/> </dxc:XYDiagram2D.DefaultPane> </dxc:XYDiagram2D> </dxc:ChartControl.Diagram> </dxc:ChartControl> </Grid> </Grid> </Window>
C#代码如下：
using DevExpress.Xpf.Charts; using System; using System.Collections.Generic; using System.Windows; namespace DashBoardNavigationDemo { /// <summary> /// BarChartWindow.xaml 的交互逻辑 /// </summary> public partial class BarChartWindow : Window { private List<SeriesPoint> lsBarPoint = new List<SeriesPoint>(); //投入柱形图数据源 private List<SeriesPoint> lsBarPoint2 = new List<SeriesPoint>(); //产出柱形图数据源 public BarChartWindow() { InitializeComponent(); } /// <summary> /// 绑定数据 /// </summary> private void BindData() { GetData(); BarSideSerie.Points.Clear(); BarSideSerie.Points.AddRange(lsBarPoint); BarSideSerie2.Points.Clear(); BarSideSerie2.Points.AddRange(lsBarPoint2); BarSideSerie.Animate(); BarSideSerie2.Animate(); barChart.UpdateData(); } private void Window_Loaded(object sender, RoutedEventArgs e) { BindData(); } /// <summary> /// 获取数据并加工转化 /// </summary> private void GetData() { List<string> list = new List<string>() { "工序1", "工序2", "工序3", "工序4" }; Dictionary<string, int> dic1Value = new Dictionary<string, int>(); Dictionary<string, int> dic2Value = new Dictionary<string, int>(); Random rd = new Random(); foreach (var processName in list) { int num = 0; num = rd.Next(1, 20); if (dic1Value.ContainsKey(processName)) { dic1Value[processName] = num; } else { dic1Value.Add(processName, num); } } foreach (var processName in list) { int num = 0; num = rd.Next(1, 20); if (dic2Value.ContainsKey(processName)) { dic2Value[processName] = num; } else { dic2Value.Add(processName, num); } } lsBarPoint.Clear(); lsBarPoint2.Clear(); foreach (var item in dic1Value) { lsBarPoint.Add(new SeriesPoint() { Argument = item.Key, Value = item.Value }); } foreach (var item in dic2Value) { lsBarPoint2.Add(new SeriesPoint() { Argument = item.Key, Value = item.Value }); } } } }
ChartControl柱形图相关属性总结：
1.AnimationMode 属性设置柱形图控件的动画效果：OnLoad是加载时动画触发动画效果；OnDataChanged 是图表数据改变时；Disabled是禁用动画效果。
2.Legend：图例
<dxc:ChartControl.Legend> <dxc:Legend Background="#262A4D" Visible="True" HorizontalPosition="Right" VerticalPosition="TopOutside" Orientation="Horizontal" FontSize="12" Margin="0" Padding="0" BorderThickness="0" > </dxc:Legend> </dxc:ChartControl.Legend>
3.X或Y轴属性
<dxc:XYDiagram2D.AxisY >
<dxc:AxisY2D x:Name="_AxisY" GridLinesMinorVisible="True">
<dxc:AxisY2D.Label>
<dxc:AxisLabel Foreground="WhiteSmoke" FontSize="12"/>
</dxc:AxisY2D.Label>
<dxc:AxisY2D.Title>
<dxc:AxisTitle Visible="True" Content="产量, 万片"/>
</dxc:AxisY2D.Title>
</dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>
dxc:AxisY2D.Label 表示Y轴坐标刻度值标签，X轴同理。
dxc:AxisY2D.Title 表示Y轴标题，X轴同理。
4.柱形图中间主体显示区域设置：
<dxc:XYDiagram2D.DefaultPane> <dxc:Pane Name="DefaultPaneBackground" DomainBorderBrush="#262A4D" DomainBrush="#262A4D"/> </dxc:XYDiagram2D.DefaultPane>
上面代码设置了柱形图主体区域的背景色。
5.dxc:XYDiagram2D.Series 设置 ChartControl有哪些系列的图表（柱形图，折线图，饼图，雷达图等），
在此例中，我在 dxc:XYDiagram2D.Series中添加了两个BarSideBySideSeries2D系列。
6.dxc:BarSideBySideSeries2D.Model设置柱形图的外观
<dxc:BarSideBySideSeries2D.Model> <dxc:BorderlessSimpleBar2DModel/> </dxc:BarSideBySideSeries2D.Model>
7.dxc:BarSideBySideSeries2D.Label 设置柱形图上的的标签显示的风格
<dxc:BarSideBySideSeries2D.Label> <dxc:SeriesLabel Foreground="Red" dxc:BarSideBySideSeries2D.LabelPosition="Outside" HorizontalAlignment="Center" VerticalAlignment="Center"/> </dxc:BarSideBySideSeries2D.Label>
上面代码设置了柱形图显示值的前景色是红色 ：Foreground="Red"
标签的位置在柱形图外面顶上：dxc:BarSideBySideSeries2D.LabelPosition="Outside"
水平方向居中对齐，垂直方向居中对象。
上面那种写法，标签会被一个矩形框包住，如果不想要矩形框，可以自定义标签，如下代码：
<dxc:BarSideBySideSeries2D.Label> <dxc:SeriesLabel dxc:BarSideBySideSeries2D.LabelPosition="Outside" ConnectorVisible="False" ResolveOverlappingMode="Default" Indent="20" dxc:MarkerSeries2D.Angle="90" Visible="True"> <dxc:SeriesLabel.ElementTemplate> <DataTemplate> <Border Background="Transparent" Opacity="0.75" CornerRadius="2"> <StackPanel> <TextBlock Text="{Binding Path=Text}" Foreground="Red"/> </StackPanel> </Border> </DataTemplate> </dxc:SeriesLabel.ElementTemplate> </dxc:SeriesLabel> </dxc:BarSideBySideSeries2D.Label>
其中：
dxc:BarSideBySideSeries2D.LabelPosition="Outside" 为 设置 柱子数值标签显示的位置在顶上
ConnectorVisible="False" 为：不显示连接柱子和标签之间的线
Indent="20" 为标签到柱子顶端的距离（如果ConnectorVisible="True"）
