Zum Inhalt springen
DIAGRAMME · COMPLETE

AreaChart

Summen und Anteile auf einen Blick mit gestapelten, prozentualen oder überlappenden Flächen.

Zeigen Sie Summen und Anteile auf einen Blick mit gestapelten, prozentualen oder überlappenden Flächen.

Warum es hilft

  • Gestapelt, prozentual oder überlagert
  • Leicht lesbare Summen
  • Anklickbare Legende

Wo es passt

  • Zusammensetzung im Zeitverlauf
  • Kumulierte Werte
  • Marktanteil
Das Steuerelement AreaChart auf einer RayCraft-Seite

Beispiel

<Select TValue="AreaMode" @bind-Value="_mode" Items="_modes" Label="Mode" />
<AreaChart Label="Visits by channel" Mode="_mode" Categories="_months" Series="_series" ValueFormat="#,0" />

@code {
    private AreaMode _mode = AreaMode.Stacked;
    private readonly AreaMode[] _modes = [AreaMode.Stacked, AreaMode.Percent, AreaMode.Overlay];
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"];
    private readonly ChartSeries[] _series =
    [
        new("Search", [320, 340, 390, 420, 410, 470, 520, 540]),
        new("Direct", [210, 220, 215, 240, 260, 255, 280, 300]),
        new("Social", [90, 120, 160, 150, 210, 230, 220, 260]),
        new("Email", [60, 55, 70, 80, 75, 95, 100, 120])
    ];
}

Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.

Teil von RayCraft Complete.

Alle Steuerelemente ยท Dokumentation