Velg et intervall i en dataserie med to håndtak, med en liten forhåndsvisning av dataene bak dem.
Hvorfor det hjelper
- Intervallvalg med forhåndsvisning
- To håndtak
- Utmerket ved siden av diagrammer
Hvor det passer
- Zoome et diagram
- Velge en periode
- Beskjære en serie
Eksempel
<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();
}Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.