Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@tera1707

[C#] oxyplotでグラフを書く1

Last updated at Posted at 2021-05-06

oxyplot関連記事

やりたいこと

WPFで、グラフを表示するアプリをやることになり「oxyplot」というライブラリを使うこととなった。
使い方を練習したい。

※横軸を時間、縦軸に数値、のようなグラフを扱ったので、そういうグラフのみまずは挙げておく。
(円グラフとかは今回やってないので一旦対象外。)

今回の前提

下記を使用する。

.NET 5
image.png
OxyPlot.Wpfの2.0.0
image.png

部品取りコード

横軸、縦軸の設定

基本の軸の設定。

<Window x:Class="WpfApp1.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:local="clr-namespace:WpfApp1"
        xmlns:oxy="http://oxyplot.org/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Name="root">
    <Grid>
        <oxy:PlotView Model="{Binding Model, ElementName=root}" Controller="{Binding Controller, ElementName=root}" />
    </Grid>
</Window>

using OxyPlot;
using OxyPlot.Axes;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        // OxyPlotのためのモデルとコントローラー
        public PlotModel Model { get; } = new PlotModel();
        public PlotController Controller { get; } = new PlotController();

        // 軸の設定
        public OxyPlot.Axes.LinearAxis AxisX { get; } = new OxyPlot.Axes.LinearAxis();
        public OxyPlot.Axes.LinearAxis AxisY { get; } = new OxyPlot.Axes.LinearAxis();

        public MainWindow()
        {
            InitializeComponent();
            InitGraph();
        }

        // グラフの設定
        public void InitGraph()
        {
            // X軸の設定
            AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom;    // 軸の位置(topにしたら、目盛りが上にくる)
            AxisX.MajorStep = 0.5;                                // 大きなTickの間隔
            AxisX.MajorTickSize = 10;                             // 大きなTickの長さ
            AxisX.TickStyle = TickStyle.Crossing;                 // Tickのスタイル(ナシにもできる)
            AxisX.MinorStep = 0.1;                                // 小さなTickの間隔
            AxisX.Maximum = 10.0;                                 // 右端のX軸の値
            // Y軸の設定
            AxisY.Position = OxyPlot.Axes.AxisPosition.Left;      // Y軸の位置(Rightにしたら、目盛りが右にくる)
            AxisY.Minimum = 0.0;                                  // 左端のX軸の値

            // 設定した軸をモデルにセット
            Model.Title = "グラフのタイトル";
            Model.Axes.Add(AxisX);
            Model.Axes.Add(AxisY);

            // セットした内容を反映させる
            Model.InvalidatePlot(true);
        }
    }
}

image.png

線グラフ

LineSeriesを使う。

using OxyPlot;
using OxyPlot.Axes;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        // OxyPlotのためのモデルとコントローラー
        public PlotModel Model { get; } = new PlotModel();
        public PlotController Controller { get; } = new PlotController();

        // 軸の設定
        public OxyPlot.Axes.LinearAxis AxisX { get; } = new OxyPlot.Axes.LinearAxis();
        public OxyPlot.Axes.LinearAxis AxisY { get; } = new OxyPlot.Axes.LinearAxis();

        public MainWindow()
        {
            InitializeComponent();
            InitGraph();
        }

        // グラフの設定
        public void InitGraph()
        {
            // X軸の設定
            AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom;    // 軸の位置(topにしたら、目盛りが上にくる)
            // Y軸の設定
            AxisY.Position = OxyPlot.Axes.AxisPosition.Left;      // Y軸の位置(Rightにしたら、目盛りが右にくる)

            // 設定した軸をモデルにセット
            Model.Title = "グラフのタイトル";
            Model.Axes.Add(AxisX);
            Model.Axes.Add(AxisY);

            // 線グラフ
            var LineSeries = new OxyPlot.Series.LineSeries();
            LineSeries.Title = "Line";
            LineSeries.InterpolationAlgorithm = InterpolationAlgorithms.UniformCatmullRomSpline;//グラフの角を丸める
            LineSeries.Color = OxyColor.FromArgb(0xff, 0xff, 0, 0);     // 上の線の色
            LineSeries.StrokeThickness = 2;                             // 線の太さ
            // 点を追加
            LineSeries.Points.Add(new DataPoint(1.0, 10.0));            
            LineSeries.Points.Add(new DataPoint(5.0, 90.0));
            LineSeries.Points.Add(new DataPoint(9.0, 40.0));
            // 線グラフをモデルに追加
            Model.Series.Add(LineSeries);

            // セットした内容を反映させる
            Model.InvalidatePlot(true);
        }
    }
}

image.png

二本線グラフ

AreaSeriesを使う。
上の線と下の線の間に色を付けたりできる。

using OxyPlot;
using OxyPlot.Axes;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        // OxyPlotのためのモデルとコントローラー
        public PlotModel Model { get; } = new PlotModel();
        public PlotController Controller { get; } = new PlotController();

        // 軸の設定
        public OxyPlot.Axes.LinearAxis AxisX { get; } = new OxyPlot.Axes.LinearAxis();
        public OxyPlot.Axes.LinearAxis AxisY { get; } = new OxyPlot.Axes.LinearAxis();

        public MainWindow()
        {
            InitializeComponent();
            InitGraph();
        }

        // グラフの設定
        public void InitGraph()
        {
            // X軸の設定
            AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom;    // 軸の位置(topにしたら、目盛りが上にくる)
            // Y軸の設定
            AxisY.Position = OxyPlot.Axes.AxisPosition.Left;      // Y軸の位置(Rightにしたら、目盛りが右にくる)

            // 設定した軸をモデルにセット
            Model.Title = "グラフのタイトル";
            Model.Axes.Add(AxisX);
            Model.Axes.Add(AxisY);

            // 二本線グラフ
            var LineSeries = new OxyPlot.Series.AreaSeries();// Point(上)とPoint2(下)の2つの値をsetしたら、その間に色をつけれる
            LineSeries.Title = "Line";
            LineSeries.InterpolationAlgorithm = InterpolationAlgorithms.UniformCatmullRomSpline;//グラフの角を丸める
            LineSeries.Color = OxyColor.FromArgb(0xff, 0xff, 0, 0);     // 上の線の色
            LineSeries.Color2 = OxyColor.FromArgb(0xff, 0x0, 0xff, 0);  // 下の線の色
            LineSeries.Fill = OxyColor.FromArgb(0x66, 0x0, 0, 0xff);    // 塗る色
            LineSeries.StrokeThickness = 2;                             // 線の太さ
            // 点(上の線)を追加
            LineSeries.Points.Add(new DataPoint(1.0, 10.0));
            LineSeries.Points.Add(new DataPoint(5.0, 90.0));
            LineSeries.Points.Add(new DataPoint(9.0, 40.0));
            // 点(下の線)を追加
            LineSeries.Points2.Add(new DataPoint(1.0, 5.0));
            LineSeries.Points2.Add(new DataPoint(6.0, 80.0));
            LineSeries.Points2.Add(new DataPoint(9.0, 20.0));
            // 線グラフをモデルに追加
            Model.Series.Add(LineSeries);

            // セットした内容を反映させる
            Model.InvalidatePlot(true);
        }
    }
}

image.png

棒グラフ

LinearBarSeriesを使う。
棒の太さはコードから調整できる。

using OxyPlot;
using OxyPlot.Axes;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        // OxyPlotのためのモデルとコントローラー
        public PlotModel Model { get; } = new PlotModel();
        public PlotController Controller { get; } = new PlotController();

        // 軸の設定
        public OxyPlot.Axes.LinearAxis AxisX { get; } = new OxyPlot.Axes.LinearAxis();
        public OxyPlot.Axes.LinearAxis AxisY { get; } = new OxyPlot.Axes.LinearAxis();

        public MainWindow()
        {
            InitializeComponent();
            InitGraph();
        }

        // グラフの設定
        public void InitGraph()
        {
            // X軸の設定
            AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom;    // 軸の位置(topにしたら、目盛りが上にくる)
            AxisX.Maximum = 10.0;
            AxisX.Minimum = 0.0;
            // Y軸の設定
            AxisY.Position = OxyPlot.Axes.AxisPosition.Left;      // Y軸の位置(Rightにしたら、目盛りが右にくる)

            // 設定した軸をモデルにセット
            Model.Title = "グラフのタイトル";
            Model.Axes.Add(AxisX);
            Model.Axes.Add(AxisY);

            // 棒グラフ
            var BarSeries = new OxyPlot.Series.LinearBarSeries();
            BarSeries.Title = "LinearBar";
            BarSeries.BarWidth = 30;
            // 点を追加
            BarSeries.Points.Add(new DataPoint(1.0, 10.0));
            BarSeries.Points.Add(new DataPoint(5.0, 90.0));
            BarSeries.Points.Add(new DataPoint(9.0, 40.0));
            // グラフをモデルに追加
            Model.Series.Add(BarSeries);

            // セットした内容を反映させる
            Model.InvalidatePlot(true);
        }
    }
}

image.png

棒グラフの太さメモ

グラフを表示している領域の幅はModel.PlotArea.Widthでとることができる。
(上の図だと、X軸の0と表示されているところ～10と表示されているところ、までの長さ)
等間隔に棒グラフを表示させるような場合は、そのWidthと棒の本数で、太さ(barSeries.BarWidth)の値を計算できるかもしれない。

データをObservableCollectionで管理する

ObservableCollectionを作って、それをSeriesのItemsSourceに指定する。

using OxyPlot;
using OxyPlot.Axes;
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        // OxyPlotのためのモデルとコントローラー
        public PlotModel Model { get; } = new PlotModel();
        public PlotController Controller { get; } = new PlotController();

        // 軸の設定
        public OxyPlot.Axes.LinearAxis AxisX { get; } = new OxyPlot.Axes.LinearAxis();
        public OxyPlot.Axes.LinearAxis AxisY { get; } = new OxyPlot.Axes.LinearAxis();

        // データを保存するコレクション
        public ObservableCollection<DataPoint> Datas { get; private set; } = new ObservableCollection<DataPoint>();

        public MainWindow()
        {
            InitializeComponent();
            InitGraph();
        }

        // グラフの設定
        public void InitGraph()
        {
            // X軸の設定
            AxisX.Position = OxyPlot.Axes.AxisPosition.Bottom;    // 軸の位置(topにしたら、目盛りが上にくる)
            // Y軸の設定
            AxisY.Position = OxyPlot.Axes.AxisPosition.Left;      // Y軸の位置(Rightにしたら、目盛りが右にくる)

            // 設定した軸をモデルにセット
            Model.Title = "グラフのタイトル";
            Model.Axes.Add(AxisX);
            Model.Axes.Add(AxisY);

            // 線グラフ
            var LineSeries = new OxyPlot.Series.LineSeries();
            LineSeries.Title = "Line";
            LineSeries.Color = OxyColor.FromArgb(0xff, 0xff, 0, 0);     // 上の線の色
            LineSeries.StrokeThickness = 2;                             // 線の太さ
            // データを関連付け加
            LineSeries.ItemsSource = Datas;
            // 点を追加
            Datas.Add(new DataPoint(1.0, 10.0));
            Datas.Add(new DataPoint(5.0, 90.0));
            Datas.Add(new DataPoint(9.0, 40.0));
            // グラフをモデルに追加
            Model.Series.Add(LineSeries);

            // セットした内容を反映させる
            Model.InvalidatePlot(true);
        }
    }
}

image.png

参考

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?