Gå til indholdet
DIAGRAMMER · COMPLETE

LineChart

Vis tendenser over tid med flere serier og en klikbar signaturforklaring.

Vis tendenser over tid med flere serier, valgfri udjævning og områdefyld og en klikbar signaturforklaring, der skjuler eller viser hver serie.

Hvorfor det hjælper

  • Flere serier
  • Muligheder for udjævning og område
  • Klikbar signaturforklaring

Hvor det passer

  • Trafik- og omsætningstendenser
  • Sensordata
  • Nøgletal 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 uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.

Del af RayCraft Complete.

Alle kontroller ยท Dokumentation