BzChart
نمودارها
میله ای، خطی، ناحیه ای، دایره ای، دونات و اسپارک لاین — همه SVG خالص، بدون وابستگی جاوااسکریپت.
دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنتقویمابزار ایرانی
کامپوننتی پیدا نشد.
میله ای — چند سری
هر BzChartSeries یک برچسب و یک آرایه عدد میگیره. چند سری را کنار هم قرار بده تا مقایسه شوند.
فروش فصلی
2024
2023
@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 فرق دارند — بقیه ی کد یکسان است.
روند بازدید
Visits
درآمد
Revenue
@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
B
C
D
ترافیک
A
B
C
D
@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
نمودار کوچک و بدون تزئینات، مناسب داخل کارت یا ردیف جدول.
| پارامتر | توضیح |
|---|---|
Type | Bar / Line / Area / Pie / Donut / Sparkline |
Series | List<BzChartSeries> — برچسب، اعداد، و رنگ اختیاری |
Labels | برچسب محور افقی یا نام بخش ها |
Title | عنوان بالای نمودار |
ShowValues | نمایش عدد روی نمودار |
ShowLegend | نمایش راهنمای رنگ ها |
Height | ارتفاع نمودار |
@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())
};
}
}