[C#/xaml] oxyplotでTrackerを使う

14334 ワード
Xaml OxyPlot WPF WPF テキストリンク

oxyplot関連記事

やりたいこと

OxyPlotのグラフで、
デフォルトだと、右クリックしたままで、表示されたSeries(グラフの線とか棒とか)の近くにマウスを持っていくと出てくる吹き出しみたいなやつの中身を改造したい。

これ。

あと、縦横に吹き出しの先を中心に、縦横に直線が出てくる。
なんとなく狙撃のスコープみたいでかっこいい気もするが、邪魔なので消したい。

やりかた

<oxy:PlotView.DefaultTrackerTemplate>を使う。

あの吹き出しは、OxyPlotでは「Tracker」というらしい。

情報源

OxyPlot公式ドキュメントの「View > Tracker > Template」の項目。

そこに「SourceExamplesWPFCustomTrackerDemo」というサンプルアプリを見よ、とある。

その「SourceExamplesWPFCustomTrackerDemo」というサンプルがこれ。

よく見たらこのサンプルの名前、置き場所のパスに一致する...
https://github.com/ylatuya/oxyplot/tree/master/Source/Examples/WPF/WpfExamples/Examplesの間の/が見えてないということなのか...ちゃんと書いていてくれたら、見つけるのにこんなに時間はかからなかったのに....

サンプル

上のサンプルをもとに、ちょっとだけ簡略化したのが下記のコード。

<oxy:PlotView.DefaultTrackerTemplate>にを入れて、<oxyshared:TrackerControl>のContentに好きな見た目を入れてやればOK。

縦横の線を消すには、TrackerControlのVerticalLineVisibilityとHorizontalLineVisibilityをCollapsedにすればよい。

MainWindow.xaml
<Window x:Class="OxyPlotTest.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:OxyPlotTest"
        xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:oxyshared="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf.Shared" 
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Name="root">
    <Grid>
        <!-- グラフ本体 -->
        <oxy:PlotView Model="{Binding Model, ElementName=root}" Controller="{Binding Controller, ElementName=root}" >
            <oxy:PlotView.DefaultTrackerTemplate>
                <ControlTemplate>
                    <Grid>
                        <oxyshared:TrackerControl 
                            Position="{Binding Position}" 
                            VerticalLineVisibility="Collapsed" 
                            HorizontalLineVisibility="Collapsed"
                            LineExtents="{Binding PlotModel.PlotArea}" >

                            <oxyshared:TrackerControl.Content>
                                <!-- Trackerの中身をここに書いてやる -->
                                <Grid>
                                    <TextBlock Text="{Binding}" Margin="7" />
                                    <Ellipse Stroke="Red" StrokeThickness="3"/>
                                </Grid>
                            </oxyshared:TrackerControl.Content>
                        </oxyshared:TrackerControl>
                    </Grid>
                </ControlTemplate>
            </oxy:PlotView.DefaultTrackerTemplate>
        </oxy:PlotView>
    </Grid>
</Window>

csコードでは、Trackerのためには何もしていない。ただグラフを表示させただけ。
(＝以前書いたサンプルと全く同じコード。)

MainWindw.xaml.cs
using OxyPlot;
using OxyPlot.Axes;
using System.Windows;

// https://shikaku-sh.hatenablog.com/entry/oxyplot-simple-usage
// https://gist.github.com/YSRKEN/f68112602efa304b2f20c10e24f31674

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

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

        public void Init()
        {
            // 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);
        }
    }
}

見た目

前提

下記を使用。

  • .NET Framework 4.7.2
  • OxyPlot.Wpf v2.1.0-Preview1（Nuget）

備考

OxyPlotは情報が結構見つけづらい印象。
今回いろいろ見たところ、

  • まず公式Docをざっと見る
  • それっぽい項目があったら、サンプルアプリの名前(githubのパス？)が書いてるので、そこを見る。
    (サンプルは下記に置いてる)

公式Doc

サンプル(公式？)