Linien- und Flächendiagramm

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            xmlns:ch="using:Kuonen.UI.Controls.Charts"
            x:Class="Kuonen.UI.Galerie.Seiten.LinienDiagrammVorfuehrung"
            Spacing="8">
  <!-- Daten und Knöpfe füllt LinienDiagrammSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Leiste" Orientation="Horizontal" Spacing="6" />
  <ch:CartesianChart x:Name="Chart" Height="360" Width="640" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class LinienDiagrammSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new LinienDiagrammVorfuehrung();
}

/// <summary>KXAML-Fassung der Seite Linien- und Flächendiagramm: das Gerüst steht in LinienDiagrammSeite.kxaml, das Innere füllt LinienDiagrammSeite.Fuelle.</summary>
public sealed partial class LinienDiagrammVorfuehrung
{
    public LinienDiagrammVorfuehrung()
    {
        InitializeComponent();
        LinienDiagrammSeite.Fuelle(Leiste, Chart);
    }
}

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Controls.Charts;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Linien-, Flächen- und Streudiagramm mit Legende, Tracker und Zoom (Plan 6j).</summary>
public sealed partial class LinienDiagrammSeite : GalerieSeite
{
    public override string Titel => "Linien- und Flächendiagramm";

    public override string Beschreibung =>
        "CartesianChart mit Linien (gerade, geglättet, gestuft, mit Marken), gestapelten Flächen und Streupunkten. Der Zeiger zeigt die Werte am nächsten " +
        "Punkt, das Rad zoomt, Ziehen verschiebt, ein Doppelklick setzt zurück; ein Klick auf die Legende blendet eine Reihe aus. Pfeile wandern mit der " +
        "Tastatur von Punkt zu Punkt und sagen ihn an.";

    public override string Stichworte => "Chart CartesianChart LineSeries AreaSeries ScatterSeries Liniendiagramm Fläche Streudiagramm Legende Tracker Zoom Achse";

    public override string Datei => nameof(LinienDiagrammSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 8 };
        var leiste = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        var chart = new CartesianChart { Height = 360, Width = 640 };
        Fuelle(leiste, chart);
        seite.Children.Add(leiste);
        seite.Children.Add(chart);
        return seite;
    }

    /// <summary>Daten und Knöpfe (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel leiste, CartesianChart chart)
    {
        string[] monate = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
        chart.Title = "Besucher je Monat";
        chart.ZoomMode = ZoomMode.X;
        chart.XAxis = new CategoryAxis { Labels = monate };
        chart.YAxis = new NumericAxis { Title = "Tausend" };
        var linie = new LineSeries { Title = "Bern", Values = [12, 14, 18, 22, 27, 31, 35, 34, 28, 21, 15, 13], MarkerSize = 7 };
        var glatt = new LineSeries { Title = "Luzern", Values = [8, 9, 13, 17, 22, 26, 30, 29, 23, 16, 10, 9], LineSmoothness = 0.8 };
        var stufe = new LineSeries { Title = "Tarif", Values = [10, 10, 10, 12, 12, 12, 15, 15, 15, 12, 12, 10], IsStepped = true };
        chart.Series.Add(linie);
        chart.Series.Add(glatt);
        chart.Series.Add(stufe);
        void Knopf(string text, Action tun)
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => tun();
            leiste.Children.Add(k);
        }
        Knopf("Linien", () =>
        {
            chart.Series.Clear();
            chart.Series.Add(new LineSeries { Title = "Bern", Values = linie.Values, MarkerSize = 7 });
            chart.Series.Add(new LineSeries { Title = "Luzern", Values = glatt.Values, LineSmoothness = 0.8 });
            chart.Series.Add(new LineSeries { Title = "Tarif", Values = stufe.Values, IsStepped = true });
        });
        Knopf("Gestapelte Flächen", () =>
        {
            chart.Series.Clear();
            chart.Series.Add(new AreaSeries { Title = "Bern", Values = linie.Values, IsStacked = true });
            chart.Series.Add(new AreaSeries { Title = "Luzern", Values = glatt.Values, IsStacked = true });
        });
        Knopf("Streupunkte", () =>
        {
            chart.Series.Clear();
            var zufall = new Random(7);
            var punkte = new ChartPoint[60];
            for (int i = 0; i < punkte.Length; i++) punkte[i] = new ChartPoint(zufall.NextDouble() * 11, 10 + zufall.NextDouble() * 25);
            chart.Series.Add(new ScatterSeries { Title = "Messungen", Points = punkte });
        });
        Knopf("Zoom zurück", chart.ResetZoom);
    }
}