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"）