“?引言部分，總領全篇文章的中心內容。”

? ?WPF的DevExpress ChartControl是一種功能強大的可視化工具，可幫助您將數據顯示為二維或偽三維條形圖、區域、線和許多其他形式。

01

—

將數據綁定到Chart Series

Step 1.?創建新項目并添加圖表

• 創建一個新的WPF應用程序項目。將其命名為第1課BindCharttoData。

• 將ChartControl組件從DX.21.2：數據和分析工具箱部分拖動到主窗口。

• 右鍵單擊圖表控件并在關聯菜單中選擇Layout | Reset All 以使圖表填充整個窗口。

新創建的圖表包含一個空白的并排條形圖和一個圖例。主窗口的標記應如下所示：

<Windowxmlns="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:local="clr-namespace:Lesson1BindChartToData"xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="Lesson1BindChartToData.MainWindow"mc:Ignorable="d"Title="MainWindow" Height="315" Width="560"><Grid><dxc:ChartControl><dxc:ChartControl.Legends><dxc:Legend/></dxc:ChartControl.Legends><dxc:XYDiagram2D><dxc:BarSideBySideSeries2D DisplayName="Series 1"/></dxc:XYDiagram2D></dxc:ChartControl></Grid> </Window>

對以下庫的引用將自動添加到項目中：

• DevExpress.Data.v21.2

• DevExpress.Xpf.Core.v21.2

• DevExpress.Charts.v21.2.Core

• DevExpress.Xpf.Charts.v21.2

• DevExpress.Mvvm.v21.2

• DevExpress.Xpf.Printing.v21.2

• DevExpress.Printing.v21.2.Core

注意：

這些引用是從全局程序集緩存（GAC）中選擇的。要在本地復制它們或在以后的產品安裝中包含它們，請使用以下目錄：

C:\ProgramFiles（x86）\DevExpress 21.2\Components\Bin\Framework\

Step 2. 準備數據模型

您可以將圖表綁定到數據庫、XML文件或運行時創建的數據。數據源應該實現IEnumerable, IListSource 或者他們的后代。有關如何用數據填充圖表的更多信息，請參閱提供數據部分。在本主題中，您將圖表綁定到ObservableCollection<T>.

使用DataPoint類實現開發數據模型：

using System.Collections.ObjectModel; using System.Windows;namespace Lesson1BindChartToData {public class DataPoint {public string Argument { get; set; }public double Value { get; set; }public static ObservableCollection<DataPoint> GetDataPoints() {return new ObservableCollection<DataPoint> {new DataPoint { Argument = "Asia", Value = 5.289D},new DataPoint { Argument = "Australia", Value = 2.2727D},new DataPoint { Argument = "Europe", Value = 3.7257D},new DataPoint { Argument = "North America", Value = 4.1825D},new DataPoint { Argument = "South America", Value = 2.1172D}};}} }

Step 3. 添加ViemModel

使用以下代碼實現MainWindowViewModel類：

using System.Collections.ObjectModel; using System.Windows;namespace Lesson1BindChartToData {public class MainWindowViewModel {public ObservableCollection<DataPoint> Data { get; private set; }public MainWindowViewModel() {this.Data = DataPoint.GetDataPoints();}} }

Step 4. 指定Data Context

Step 5.?綁定數據給圖表

單擊圖表控件的智能標記。指定ChartControl.DataSource屬性，如下圖所示：

Step 6.?用數據填充序列

指定應為系列點參數和值提供值的數據源字段。

將序列的series.ArgumentDataMember屬性設置為參數。

將序列的series.ValueDataMember屬性設置為Value。

Step 7.?自定義圖表

• 指定序列名稱

將Series.DisplayName屬性設置為年度統計信息。顯示名稱標識圖例中的系列。

• 添加圖表標題并自定義其位置

單擊圖表控件標題屬性的省略號按鈕以調用標題集合編輯器。使用“添加”按鈕創建新標題并將其添加到圖表中。

將TitleBase.HorizontalAlignment屬性設置為“中心”。

定義標題庫。按地區銷售的內容。單擊“確定”。

• 配置十字光標的選項

要自定義十字線選項，請單擊ChartControl.CrosshairOptions屬性的“新建”按鈕以創建十字線選項實例。

啟用以下屬性：

CrosshairOptions.ShowArgumentLabels

CrosshairOptions.ShowValueLabels

CrosshairOptionBase.ShowValueLine

將XYSeries2D.Crosshair LabelPattern設置為$V:f2}M。

02

—

Results

運行項目以查看結果。

生成的代碼如下所示：

<Windowxmlns="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:local="clr-namespace:Lesson1BindChartToData" xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" x:Class="Lesson1BindChartToData.MainWindow"mc:Ignorable="d" Title="MainWindow" Height="400" Width="650"><Window.DataContext><local:MainWindowViewModel/></Window.DataContext><Grid><dxc:ChartControl DataSource="{Binding Data}"><dxc:ChartControl.CrosshairOptions><dxc:CrosshairOptions ShowArgumentLabels="True" ShowValueLabels="True" ShowValueLine="True"/></dxc:ChartControl.CrosshairOptions><dxc:ChartControl.Titles><dxc:Title Content="Sales by Regions" HorizontalAlignment="Center"/></dxc:ChartControl.Titles><dxc:ChartControl.Legends><dxc:Legend/></dxc:ChartControl.Legends><dxc:XYDiagram2D><dxc:BarSideBySideSeries2D DisplayName="Annual Statistics" ArgumentDataMember="Argument" ValueDataMember="Value" CrosshairLabelPattern="${V:f2}M"/></dxc:XYDiagram2D></dxc:ChartControl></Grid> </Window>

C# CODE

using System.Collections.ObjectModel; using System.Windows; namespace Lesson1BindChartToData {/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window {public MainWindow() {InitializeComponent();}}public class MainWindowViewModel {public ObservableCollection<DataPoint> Data { get; private set; }public MainWindowViewModel() {this.Data = DataPoint.GetDataPoints();}}public class DataPoint {public string Argument { get; set; }public double Value { get; set; }public static ObservableCollection<DataPoint> GetDataPoints() {return new ObservableCollection<DataPoint> {new DataPoint { Argument = "Asia", Value = 5.289D},new DataPoint { Argument = "Australia", Value = 2.2727D},new DataPoint { Argument = "Europe", Value = 3.7257D},new DataPoint { Argument = "North America", Value = 4.1825D},new DataPoint { Argument = "South America", Value = 2.1172D}};}} }

原文鏈接：https://docs.devexpress.com/WPF/9757/controls-and-libraries/charts-suite/chart-control/getting-started/lesson-1-bind-chart-series-to-data#results

翻譯小編：mm1552923

公眾號：dotNet編程大全

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的C# WPF图表控件之ChartControl用法指南①的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。