LineChart

Покажете тенденции във времето с няколко серии, по избор изглаждане и запълване на областта и легенда, по която се кликва, за да скриете или покажете серия.

Защо помага

• Няколко серии
• Опции за изглаждане и област
• Легенда, по която се кликва

Къде пасва

• Тенденции на трафик и приходи
• Данни от сензори
• Показатели във времето

Пример

<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])
    ];
}

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Част от RayCraft Complete.

Всички контроли · Документация