scottplot(V5,Winforms)で複数あるY軸の真上に軸ラベルを描きたい

Question

実現したいこと

タイトルの通りですが、通常はY軸の左右どちらかに出る軸ラベルを軸の真上に描きたい。

発生している問題・分からないこと

複数のY軸が存在している場合にその座標の取り方がわからない。
具体的な描画の仕方も。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

生成AI(chatGPTやgemini)に訊いても、やたらと存在しないAPIを使ったり、変な位置に表示したり、何も表示できなかったりで解決できなかった。

どうも、Y軸の真上はY軸の担当描画エリア外らしく、工夫が必要らしい、というところまではわかりました。

補足

特になし

Answer 1

通常はY軸の左右どちらかに出る軸ラベルを軸の真上に描きたい。

ラベルを目盛りに重ねるって意味ですよね？見にくくないですか？（余計なお世話か^^;

Custom Axisを作れば、どうとでも描画できそうです。
ScottPlot5 WinForms Demo
ScottPlot5 WinForms Demo/Demos/CustomAxis.cs at main · ScottPlot/ScottPlot

ただ実際どうやるかは、既存実装を参考にしながら試行錯誤が必要そうです。
YAxisBase.cs at main · ScottPlot/ScottPlot
AxisBase.cs at main · ScottPlot/ScottPlot

FloatingAxisでよければリフレクションでごまかせましたが、残念ながら端に寄せるとはみ出た部分が消えますorz

using System.Reflection;
using ScottPlot;
using ScottPlot.AxisPanels;
using ScottPlot.Plottables;
using ScottPlot.WinForms;

namespace Qa3g98l2vj841kv;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var formsPlot1 = new FormsPlot { Dock = DockStyle.Fill, Parent = this, };

        // カスタムAxesに入れ替える
        formsPlot1.Plot.Axes.Remove(formsPlot1.Plot.Axes.Left);
        formsPlot1.Plot.Axes.AddLeftAxis(new CenterTickLabelYAxis(Edge.Left));

        var sig1 = formsPlot1.Plot.Add.Signal(Generate.Sin(mult: 0.01));
        sig1.Axes.YAxis = formsPlot1.Plot.Axes.Left;
        formsPlot1.Plot.Axes.Left.Label.Text = "Left Axis";
        formsPlot1.Plot.Axes.Left.Label.ForeColor = sig1.Color;


        formsPlot1.Plot.Axes.Remove(formsPlot1.Plot.Axes.Right);
        formsPlot1.Plot.Axes.AddRightAxis(new CenterTickLabelYAxis(Edge.Right));

        var sig2 = formsPlot1.Plot.Add.Signal(Generate.Cos(mult: 100));
        sig2.Axes.YAxis = formsPlot1.Plot.Axes.Right;
        formsPlot1.Plot.Axes.Right.Label.Text = "Right Axis";
        formsPlot1.Plot.Axes.Right.Label.ForeColor = sig2.Color;


        // FloatingAxisでよければリフレクションでごまかせるが...
        var floatingY = new FloatingAxis(formsPlot1.Plot.Axes.Left)
        {
            // 残念ながら端に寄せるとはみ出た部分が消えるorz
            //Position = 0,
        };
        formsPlot1.Plot.Add.Plottable(floatingY);

        var labelStyle = (LabelStyle)floatingY.GetType()
            .GetProperty("TickLabelStyle", BindingFlags.NonPublic | BindingFlags.Instance)!
            .GetValue(floatingY)!;
        labelStyle.Alignment = Alignment.MiddleCenter;
    }
}

// カスタムAxes（Y軸専用）
internal class CenterTickLabelYAxis : YAxisBase
{
    public override Edge Edge { get; }

    public CenterTickLabelYAxis(Edge edge)
    {
        if (edge != Edge.Left && edge != Edge.Right) throw new InvalidOperationException();

        Edge = edge;
        TickGenerator = new ScottPlot.TickGenerators.NumericAutomatic();
        LabelRotation = edge == Edge.Left ? -90 : 90;
    }

    public override float Measure(Paint paint)
    {
        if (!IsVisible) return 0;
        if (!Range.HasBeenSet) return SizeWhenNoData;

        float maxTickLabelWidth = TickGenerator.Ticks.Length > 0
            ? TickGenerator.Ticks.Select(x => TickLabelStyle.Measure(x.Label, paint).Width).Max() : 0;

        // 軸上にラベルを表示するのでPaddingBetweenTickAndAxisLabelsは不要
        float axisLabelHeight = string.IsNullOrEmpty(LabelStyle.Text) && LabelStyle.Image is null
            ? EmptyLabelPadding.Horizontal
            : LabelStyle.Measure(LabelText, paint).Height
            //+ PaddingBetweenTickAndAxisLabels.Horizontal
            + PaddingOutsideAxisLabels.Horizontal;

        // ラベルが軸の反対側に半分出るので1/2
        return maxTickLabelWidth / 2 + axisLabelHeight;
    }

    public override void Render(RenderPack rp, float size, float offset)
    {
        if (!IsVisible) return;

        PixelRect panelRect = GetPanelRect(rp.DataRect, size, offset, rp.Paint);
        float x = Edge == Edge.Left
            ? panelRect.Left + PaddingOutsideAxisLabels.Horizontal
            : panelRect.Right - PaddingOutsideAxisLabels.Horizontal;
        Pixel labelPoint = new(x, rp.DataRect.VerticalCenter);

        LabelAlignment = Alignment.UpperCenter;
        LabelStyle.Render(rp.Canvas, labelPoint, rp.Paint);

        DrawTicks2(rp, TickLabelStyle, panelRect, TickGenerator.Ticks, this, MajorTickStyle, MinorTickStyle);
        DrawFrame(rp, panelRect, Edge, FrameLineStyle);
    }

    private static void DrawTicks2(RenderPack rp, LabelStyle label, PixelRect panelRect, IEnumerable<Tick> ticks, IAxis axis, TickMarkStyle majorStyle, TickMarkStyle minorStyle)
    {
        Paint paint = rp.Paint;

        foreach (Tick tick in ticks)
        {
            paint.Color = tick.IsMajor ? majorStyle.Color : minorStyle.Color;
            paint.StrokeWidth = tick.IsMajor ? majorStyle.Width : minorStyle.Width;
            paint.IsAntialias = tick.IsMajor ? majorStyle.AntiAlias : minorStyle.AntiAlias;
            float tickLength = tick.IsMajor ? majorStyle.Length : minorStyle.Length;
            float yPx = axis.GetPixel(tick.Position, panelRect);
            float x = axis.Edge == Edge.Left ? panelRect.Right : panelRect.Left;

            // 左右にtickLength分の線を引く
            PixelLine pxLine = new(x - tickLength, yPx, x + tickLength, yPx);

            var lineStyle = tick.IsMajor ? majorStyle : minorStyle;
            lineStyle.Render(rp.Canvas, paint, pxLine);

            if (string.IsNullOrWhiteSpace(tick.Label) || !label.IsVisible) continue;
            label.Text = tick.Label;

            float xPx = x; // 軸に重ねるので余計なオフセット計算なし

            Pixel px = new(xPx, yPx);
            if (label.Rotation == 0)
                label.Alignment = Alignment.MiddleCenter; // 何も気にせずMiddleCenterに描く
            label.Render(rp.Canvas, px, paint);
        }
    }
}

---

追記

Y軸の真上というのは、たとえば、示してくれたグラフでいうと"LeftAxis"の文字が、左のY軸の0.01の数字とForm1という文字の間に横書きで表示されて欲しいという意味でした。

using ScottPlot;
using ScottPlot.AxisPanels;
using ScottPlot.WinForms;

namespace Qa3g98l2vj841kv;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var formsPlot1 = new FormsPlot { Dock = DockStyle.Fill, Parent = this, };
        formsPlot1.Plot.Title("Plot Title");

        formsPlot1.Plot.Axes.Remove(formsPlot1.Plot.Axes.Left);
        formsPlot1.Plot.Axes.AddLeftAxis(new HorizontalLabelYAxis(Edge.Left));

        var sig1 = formsPlot1.Plot.Add.Signal(Generate.Sin(mult: 0.01));
        sig1.Axes.YAxis = formsPlot1.Plot.Axes.Left;
        formsPlot1.Plot.Axes.Left.Label.Text = "Left Axis";
        formsPlot1.Plot.Axes.Left.Label.ForeColor = sig1.Color;


        formsPlot1.Plot.Axes.Remove(formsPlot1.Plot.Axes.Right);
        formsPlot1.Plot.Axes.AddRightAxis(new HorizontalLabelYAxis(Edge.Right));

        var sig2 = formsPlot1.Plot.Add.Signal(Generate.Cos(mult: 100));
        sig2.Axes.YAxis = formsPlot1.Plot.Axes.Right;
        formsPlot1.Plot.Axes.Right.Label.Text = "Right Axisssssssssssssss";
        formsPlot1.Plot.Axes.Right.Label.ForeColor = sig2.Color;


        var sig3 = formsPlot1.Plot.Add.Signal(Generate.RandomSample(50));
        var left2 = new HorizontalLabelYAxis(Edge.Left) { LabelText = "Secondary Left Axis", LabelFontColor = sig3.Color, };
        sig3.Axes.YAxis = left2;
        formsPlot1.Plot.Axes.AddLeftAxis(left2);
    }
}

internal class HorizontalLabelYAxis : YAxisBase
{
    public override Edge Edge { get; }
    public PixelSize AxisLabelSize { get; private set; }

    public HorizontalLabelYAxis(Edge edge)
    {
        if (edge != Edge.Left && edge != Edge.Right) throw new InvalidOperationException();

        Edge = edge;
        TickGenerator = new ScottPlot.TickGenerators.NumericAutomatic();
        LabelAlignment = Alignment.UpperCenter; // 軸に対して上部中央
        LabelRotation = 0; // 回転なし
    }

    public override float Measure(Paint paint)
    {
        if (!IsVisible) return 0;
        if (!Range.HasBeenSet) return SizeWhenNoData;

        float maxTickLabelWidth = TickGenerator.Ticks.Length > 0
            ? TickGenerator.Ticks.Select(x => TickLabelStyle.Measure(x.Label, paint).Width).Max() : 0;

        // 軸ラベルサイズ
        AxisLabelSize = string.IsNullOrEmpty(LabelStyle.Text) && LabelStyle.Image is null
            ? PixelSize.Zero : LabelStyle.Measure(LabelText, paint).Size;

        // 目盛りラベル幅と軸ラベル幅半分の大きい方を採用＋適当にパディング
        return MathF.Max(maxTickLabelWidth, AxisLabelSize.Width / 2)
            + PaddingBetweenTickAndAxisLabels.Horizontal
            + PaddingOutsideAxisLabels.Horizontal;
    }

    public override void Render(RenderPack rp, float size, float offset)
    {
        if (!IsVisible) return;

        PixelRect panelRect = GetPanelRect(rp.DataRect, size, offset, rp.Paint);
        float x = Edge == Edge.Left ? panelRect.Right : panelRect.Left;
        Pixel labelPoint = new(x, rp.DataRect.Top);
        //Drawing.DrawDebugRectangle(rp.Canvas, rp.Paint, panelRect, labelPoint, LabelFontColor);

        // 上にずらす座標計算（内側の軸から順に上に乗っていく仕様）
        var offsetY = 0f;
        foreach (var axes in rp.Plot.Axes.GetAxes(Edge).OfType<HorizontalLabelYAxis>())
        {
            offsetY += axes.AxisLabelSize.Height;
            if (axes == this) break;
        }
        LabelStyle.Render(rp.Canvas, labelPoint.MovedUp(offsetY), rp.Paint);

        DrawTicks(rp, TickLabelStyle, panelRect, TickGenerator.Ticks, this, MajorTickStyle, MinorTickStyle);
        DrawFrame(rp, panelRect, Edge, FrameLineStyle);
    }
}

Comments

[k-kuma.esd]

私の日本語が悪かったですね。Y軸の真上というのは、たとえば、示してくれたグラフでいうと"LeftAxis"の文字が、左のY軸の0.01の数字とForm1という文字の間に横書きで表示されて欲しいという意味でした。
確かに、“上"という表現だと提示してくださったような意味に取ってしまってもおかしくないですよね。
すいませんでした。

[TN8001]

> 私の日本語が悪かったですね。

いや～私の頭が悪かったですｗ
「軸ラベル」と書いてあるのに「目盛りラベル」と勘違いしました（変だなとは思いました^^;

> "LeftAxis"の文字が、左のY軸の0.01の数字とForm1という文字の間に横書きで表示されて欲しいという意味でした。

なにかそういうプロパティがあってもよさそうですが見当たらないですねぇ。
となると結局カスタムAxesということになりそうです。

追記しました。
同じ側に複数軸があった場合、上に乗っていくようにしました（2本でもうサイズいっぱいだがまあ適当にパディングでも入れてください^^;

[k-kuma.esd]

バッチリです。生成AIが何時間もかけた問題がこんなに綺麗に解決するとは...まだまだ人間も捨てたもんじゃないって事ですね。
実は、OxyPlotでも試してみてそちらではなんとかなったのですが、なんとなく見た目や速度などの点でScottPlotのほうが好きなので、またScottPlotで先をすすめてみようかと思います。
ありがとうございました。BAです。