Wählen Sie mit zwei Griffen ein Intervall einer Datenreihe, mit einer kleinen Vorschau der Daten dahinter.
Warum es hilft
- Intervallauswahl mit Vorschau
- Zwei Griffe
- Ideal neben Diagrammen
Wo es passt
- Ein Diagramm zoomen
- Einen Zeitraum wählen
- Eine Reihe beschneiden
Beispiel
<div class="doc-stack" style="max-width:36rem">
<RangeSelector Label="Period" Values="_values" Categories="_months" @bind-Low="_low" @bind-High="_high" />
<span>Total for the selected months: @Total.ToString("N0")</span>
</div>
@code {
private readonly double[] _values = [120, 135, 150, 142, 160, 180, 210, 205, 190, 170, 150, 175];
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
private double _low = 2;
private double _high = 7;
private double Total => _values.Skip((int)_low).Take((int)_high - (int)_low + 1).Sum();
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.