Zeigen Sie Trends über die Zeit mit mehreren Serien, optionaler Glättung und Flächenfüllung und einer anklickbaren Legende, die jede Serie aus- oder einblendet.
Warum es hilft
- Mehrere Serien
- Optionen für Glättung und Fläche
- Anklickbare Legende
Wo es passt
- Verkehrs- und Umsatztrends
- Sensordaten
- Kennzahlen im Zeitverlauf
Beispiel
<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])
];
}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.