BzChart

نمودارها

میله ای، خطی، ناحیه ای، دایره ای، دونات و اسپارک لاین — همه SVG خالص، بدون وابستگی جاوااسکریپت.

میله ای — چند سری

هر BzChartSeries یک برچسب و یک آرایه عدد میگیره. چند سری را کنار هم قرار بده تا مقایسه شوند.

فروش فصلی
0 100 200 300 400Q1Q2Q3Q41201202002001501502802809090160160130130210210
2024 2023
razor
@using BzCore.Components.Chart
@using BzCore.Enums

<BzChart Type="BzChartType.Bar"
         Title="فروش فصلی"
         Labels="_quarters"
         Series="_series"
         ShowValues="true" />

@code {
    private readonly List<string> _quarters = new() { "Q1", "Q2", "Q3", "Q4" };

    // BzChartSeries(label, values, color?)
    private List<BzChartSeries> _series = new()
    {
        new("2024", new double[] { 120, 200, 150, 280 }),
        new("2023", new double[] { 90, 160, 130, 210 }),
    };
}
خطی و ناحیه ای

این دو فقط در Type فرق دارند — بقیه ی کد یکسان است.

روند بازدید
0 10 20 30 40123456
Visits
درآمد
0 10 20 30 40123456
Revenue
razor
@using BzCore.Components.Chart
@using BzCore.Enums

@* Only Type differs between these two. *@
<BzChart Type="BzChartType.Line" Title="روند بازدید" Labels="_months" Series="_line" />
<BzChart Type="BzChartType.Area" Title="درآمد"      Labels="_months" Series="_area" />

@code {
    private readonly List<string> _months = new() { "1", "2", "3", "4", "5", "6" };

    private List<BzChartSeries> _line = new() { new("Visits",  new double[] { 8, 14, 11, 20, 17, 25 }) };
    private List<BzChartSeries> _area = new() { new("Revenue", new double[] { 12, 19, 15, 28, 24, 33 }) };
}
دایره ای و دونات

برای نمودارهای سهمی، یک سری بده و Labels را نام هر بخش قرار بده. باز هم فقط Type فرق میکنه.

سهم بازار
A (62%)B (18%)C (12%)D (8%)62%18%12%8%
A B C D
ترافیک
A (62%)B (18%)C (12%)D (8%)62%18%12%8%
A B C D
razor
@using BzCore.Components.Chart
@using BzCore.Enums

@* Share charts take one series; Labels names each slice. *@
<BzChart Type="BzChartType.Pie"   Title="سهم بازار" Labels="_shares" Series="_data" ShowValues="true" />
<BzChart Type="BzChartType.Donut" Title="ترافیک"    Labels="_shares" Series="_data" ShowValues="true" />

@code {
    private readonly List<string> _shares = new() { "A", "B", "C", "D" };
    private List<BzChartSeries> _data = new() { new("", new double[] { 62, 18, 12, 8 }) };
}
Sparkline

نمودار کوچک و بدون تزئینات، مناسب داخل کارت یا ردیف جدول.

پارامتر توضیح
TypeBar / Line / Area / Pie / Donut / Sparkline
SeriesList<BzChartSeries> — برچسب، اعداد، و رنگ اختیاری
Labelsبرچسب محور افقی یا نام بخش ها
Titleعنوان بالای نمودار
ShowValuesنمایش عدد روی نمودار
ShowLegendنمایش راهنمای رنگ ها
Heightارتفاع نمودار
razor
@using BzCore.Components.Chart
@using BzCore.Components.Button
@using BzCore.Enums

<BzChart Type="BzChartType.Sparkline" Height="60px" ShowLegend="false" Series="_spark" />

<BzButton Size="BzSize.Small" Text="دیتا تصادفی" OnClick="Randomize" />

@code {
    private readonly Random _rng = new();

    private List<BzChartSeries> _spark = new()
    {
        new("", new double[] { 5, 8, 6, 10, 7, 12, 9, 14 })
    };

    private void Randomize()
    {
        _spark = new()
        {
            new("", Enumerable.Range(0, 10).Select(_ => (double)_rng.Next(3, 20)).ToList())
        };
    }
}