Hopp til innholdet
DIAGRAMMER · COMPLETE

LineChart

Vis trender over tid med flere serier og en klikkbar forklaring.

Vis trender over tid med flere serier, valgfri utjevning og områdefyll og en klikkbar forklaring som skjuler eller viser hver serie.

Hvorfor det hjelper

  • Flere serier
  • Alternativer for utjevning og område
  • Klikkbar forklaring

Hvor det passer

  • Trafikk- og inntektstrender
  • Sensordata
  • Nøkkeltall over tid
Kontrollen LineChart på en RayCraft-side

Eksempel

<Stack Direction="StackDirection.Column" Spacing="3">
    <Stack Spacing="6">
        <Switch @bind-Value="_smooth" Label="Smooth" />
        <Switch @bind-Value="_area" Label="Area" />
    </Stack>
    <LineChart Label="Visitors per month" Series="_series" Categories="_months" Smooth="_smooth" Area="_area" />
</Stack>

@code {
    private bool _smooth;
    private bool _area;
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    private readonly ChartSeries[] _series =
    [
        new("Website", [1200, 1350, 1280, 1600, 1900, 2100, 2000, 2300, 2150, 2500, 2700, 3100]),
        new("Mobile app", [400, 520, 610, 700, 950, 1100, 1300, 1250, 1500, 1700, 1650, 2000])
    ];
}

Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.

Del av RayCraft Complete.

Alle kontroller ยท Dokumentasjon