OxyPlot.Wpf
OxyPlot.Wpf 套件可以用來在WPF程式中表現圖形，圖形的種類有AreaSeries、BarSeries、BoxPlotSeries、 HeatMapSeries、LineSeries、PieSeries、ScatterSeries、ThreeColorLineSeries、 TwoColorLineSeries、TwoColorAreaSeries等。
介紹
OxyPlot首頁裡面的說明文件剛開始構建，內容不多。 OxyPlot的最上層為PlotModel，它的屬性有
Axes collectionSeries collectionAnnotations collectionfontsDefault ColorsMarginsLegends
實作說明
視模端
視模端我們準備下列公開的屬性：
- 由 ColumnItem 組成的躉集 PercentagesH
- 由 ColumnItem 組成的躉集 PercentagesL
- 由 string 組成的躉集 ChoiceSymbols
- 由 DataPoint 組成的躉集 Points
- 由 DataPoint 組成的躉集 Ps，DataPoint的橫坐標依序為0,1,2,...。
視圖端
LineSeries 1
下面的例子，畫的是折線圖，資料點的位置用小圓點表示。
<oxy:Plot Title="LineSeries" >
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding Points}" MarkerType="Circle" MarkerSize="3"/>
</oxy:Plot.Series>
</oxy:Plot>
ColumnSeries
下面的例子，畫的是柱狀圖。柱狀圖由兩組資料組成，兩組資料並排呈現，用顏色區分組別。 橫軸用CategoryAxis，縱軸用LinearAxis。
<oxy:Plot Title="ColumnSeries" Grid.Column="1" LegendPosition="RightTop" >
<oxy:Plot.Series>
<oxy:ColumnSeries ItemsSource="{Binding PercentagesL}" LabelFormatString="{}{0}" Title="L"/>
<oxy:ColumnSeries ItemsSource="{Binding PercentagesH}" LabelFormatString="{}{0}" Title="H"/>
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:CategoryAxis Position="Bottom" Title="選項" Labels="{Binding ChoiceSymbols}" />
<oxy:LinearAxis Position="Left" Minimum="0" Maximum="100" Title="選取率%" />
</oxy:Plot.Axes>
</oxy:Plot>
註解：在xaml裡面，{是保留符號，但是LabelFormatString要用string.Format裡的 { 來格式化輸出，因此在格式字串的開頭要加上額外的'{}'來進行脫逃(escape)避免衝突。
LineSeries 2
下面的例子，畫的是折線圖，資料點的位置用小方塊表示。 橫軸用CategoryAxis，縱軸用LinearAxis。
<oxy:Plot Title="LineSeries" >
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding Ps}" MarkerType="Square" MarkerSize="3" />
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:CategoryAxis Labels="{Binding ChoiceSymbols}"/>
</oxy:Plot.Axes>
</oxy:Plot>
實作程式碼
視圖端 MainWindow.xaml
<Window x:Class="testOxyPlot.MainWindow"
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:oxy="http://oxyplot.org/wpf"
xmlns:local="clr-namespace:testOxyPlot"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<TextBox Text="{Binding X}" Width="60" />
<TextBox Text="{Binding Y}" Width="60" />
<Button Content="Add Point" Command="{Binding AddPointCommand}" />
</StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<oxy:Plot Title="LineSeries" DockPanel.Dock="Top">
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding Points}" MarkerType="Circle" MarkerSize="3"/>
</oxy:Plot.Series>
</oxy:Plot>
<oxy:Plot Title="ColumnSeries" Grid.Column="1" LegendPosition="RightTop" >
<oxy:Plot.Series>
<oxy:ColumnSeries ItemsSource="{Binding PercentagesL}" LabelFormatString="{}{0}" Title="L"/>
<oxy:ColumnSeries ItemsSource="{Binding PercentagesH}" LabelFormatString="{}{0}" Title="H"/>
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:CategoryAxis Position="Bottom" Title="選項" Labels="{Binding ChoiceSymbols}" />
<oxy:LinearAxis Position="Left" Minimum="0" Maximum="100" Title="選取率%" />
</oxy:Plot.Axes>
</oxy:Plot>
<oxy:Plot Title="LineSeries" Grid.Row="1" >
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding Ps}" MarkerType="Square" MarkerSize="3" />
</oxy:Plot.Series>
<oxy:Plot.Axes>
<oxy:CategoryAxis Labels="{Binding ChoiceSymbols}"/>
</oxy:Plot.Axes>
</oxy:Plot>
</Grid>
</DockPanel>
</Window>
視模端 MainWindowViewModel.cs
using OxyPlot;
using OxyPlot.Series;
using Prism.Commands;
using Prism.Mvvm;
using System.Collections.ObjectModel;
namespace testOxyPlot
{
public class MainWindowViewModel : BindableBase
{
public MainWindowViewModel()
{
Points = new ObservableCollection<DataPoint> {
new DataPoint(0, 4),
new DataPoint(10, 13),
new DataPoint(20, 15),
new DataPoint(30, 16),
new DataPoint(40, 12),
new DataPoint(50, 12)
};
_PercentagesH = new ObservableCollection<ColumnItem>
{
new ColumnItem(22),
new ColumnItem(30),
new ColumnItem(50),
new ColumnItem(80),
new ColumnItem(12)
};
_PercentagesL = new ObservableCollection<ColumnItem>
{
new ColumnItem(12),
new ColumnItem(10),
new ColumnItem(30),
new ColumnItem(40),
new ColumnItem(5)
};
_ChoiceSymbols = new ObservableCollection<string> { "A", "B", "C", "D", "E" };
_Ps = new ObservableCollection<DataPoint>
{
new DataPoint(0,10),
new DataPoint(1,15),
new DataPoint(2,40),
new DataPoint(3,60),
new DataPoint(4,90)
};
Title = "HJY";
AddPointCommand = new DelegateCommand(() =>
{
Points.Add(new DataPoint(_X, _Y));
PercentagesL.Add(new ColumnItem(_X));
PercentagesH.Add(new ColumnItem(_Y));
});
}
private int _X;
public int X
{
get { return _X; }
set { SetProperty(ref _X, value); }
}
private int _Y;
public int Y
{
get { return _Y; }
set { SetProperty(ref _Y, value); }
}
private ObservableCollection<ColumnItem> _PercentagesH;
public ObservableCollection<ColumnItem> PercentagesH
{
get { return _PercentagesH; }
set { SetProperty(ref _PercentagesH, value); }
}
private ObservableCollection<ColumnItem> _PercentagesL;
public ObservableCollection<ColumnItem> PercentagesL
{
get { return _PercentagesL; }
set { SetProperty(ref _PercentagesL, value); }
}
public DelegateCommand AddPointCommand { get; private set; }
public string Title { get; private set; }
public ObservableCollection<DataPoint> Points { get; private set; }
private ObservableCollection<string> _ChoiceSymbols;
public ObservableCollection<string> ChoiceSymbols
{
get { return _ChoiceSymbols; }
set { SetProperty(ref _ChoiceSymbols, value); }
}
private ObservableCollection<DataPoint> _Ps;
public ObservableCollection<DataPoint> Ps
{
get { return _Ps; }
set { SetProperty(ref _Ps, value); }
}
}
}
Share this
