Chart Presetsv1.0.0
روندِ یک یا چند مقدار در طولِ زمان، بی‌پرشدگی؛ وقتی شکلِ تغییر مهم‌تر از حجم است. نمونهٔ بالا تعاملی است: با هدر بینِ سری‌ها جابه‌جا شوید.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { LineChart } from "@/components/ui/chart-presets"
<LineChart
data={data}
categoryKey="month"
series={[
{ key: "online", label: "آنلاین" },
{ key: "inStore", label: "حضوری" },
]}
curve="smooth"
/>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
curve شکلِ خط را تعیین می‌کند (smooth، linear، step). showPoints نقطه روی هر داده می‌گذارد؛ برای سری‌های پرنقطه (روزانهٔ سه‌ماهه) خاموشش کنید. pointShape شکلِ نقطه و colorByCategory رنگِ هر نقطه را بر اساسِ دسته عوض می‌کند.
null در داده یعنی «داده نداریم» و خط را می‌شکند؛ با صفر یکی نیست. showLabels مقدار را کنارِ هر نقطه می‌نویسد؛ برای شش تا دوازده نقطه مناسب است، نه بیشتر.
دسترس‌پذیری
- چند خط با رنگِ نزدیک را با راهنما یا آیکون از هم جدا کنید؛ رنگ تنها نشانه نباشد.
- برای روندِ مهم، جملهٔ خلاصه («۵٪ رشد در این ماه») را در فوترِ کارت بنویسید.
مرجع API
داده
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data | ChartRow[] | — | آرایهٔ ردیف‌ها؛ همان شکلی که از API می‌آید. |
| categoryKey | string | — | فیلدی که روی محورِ دسته‌ها می‌نشیند (مثلاً ماه). |
| series | { key, label?, color?, icon? }[] | — | فیلدهایی که رسم می‌شوند. color پیش‌فرض --chart-N است؛ icon در تولتیپ می‌نشیند و راهنما را HTML می‌کند. |
LineChart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| curve | "smooth" | "linear" | "step" | "linear" | شکلِ خط. |
| showPoints | boolean | true | نقطه روی هر داده. |
| pointShape | "circle" | "diamond" | "rect" | "roundRect" | "triangle" | "emptyCircle" | "circle" | شکلِ نقطه. |
| colorByCategory | boolean | false | هر نقطه رنگِ دستهٔ خودش. |
| showLabels | boolean | false | مقدار کنارِ هر نقطه. |
مشترک
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| showLegend | boolean | بیش از یک سری | راهنمای رنگ‌ها؛ اولین سری سمتِ راست. |
| showGrid | boolean | true | خطوطِ شبکه در امتدادِ محورِ مقدار. |
| hideValueAxis | boolean | false | عددهای محورِ مقدار پنهان؛ وقتی برچسب یا تولتیپ کافی است. |
| valueFormatter | (value: number) => string | عددِ فارسی | روی محور، برچسب و تولتیپ هر سه اثر می‌کند. |
| cursor | "line" | "band" | "none" | "line" | نشانگرِ دستهٔ زیرِ ماوس؛ band نوارِ پرِ پشتِ میله‌هاست. |
| tooltip | ChartTooltipOptions | — | ظاهرِ تولتیپ: indicator، hideLabel، labelFormatter، formatValue و showTotal. جزئیات در برگهٔ «تولتیپ». |
| defaultTooltipIndex | number | — | تولتیپِ این اندیس از اول باز باشد؛ مثلاً مقدارِ امروز. |
| className | string | h-72 w-full | ارتفاع را از همین‌جا بدهید؛ نمودار ارتفاعِ ذاتی ندارد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
نمودار خطی
فروشِ آنلاینِ شش ماهِ اول
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطیِ شکسته
نقطه‌ها با خطِ راست به هم وصل‌اند
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطیِ پله‌ای
تغییرِ یک‌باره؛ مثلِ نرخ یا قیمتِ پلن
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطیِ چندسری
آنلاین و حضوری
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطی با نقطه
نقطه روی هر ماه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطی با نقطهٔ سفارشی
شکلِ نقطه با pointShape
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطی با نقطه‌های رنگی
هر شهر رنگِ خودش
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطی با برچسب
مقدار کنارِ هر نقطه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خطی با برچسبِ رنگی
برچسب و نقطه‌های رنگی، بی‌محورِ مقدار
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| نمودار خطی | فروشِ آنلاینِ شش ماهِ اول |
| خطیِ شکسته | نقطه‌ها با خطِ راست به هم وصل‌اند |
| خطیِ پله‌ای | تغییرِ یک‌باره؛ مثلِ نرخ یا قیمتِ پلن |
| خطیِ چندسری | آنلاین و حضوری |
| خطی با نقطه | نقطه روی هر ماه |
| خطی با نقطهٔ سفارشی | شکلِ نقطه با pointShape |
| خطی با نقطه‌های رنگی | هر شهر رنگِ خودش |
| خطی با برچسب | مقدار کنارِ هر نقطه |
| خطی با برچسبِ رنگی | برچسب و نقطه‌های رنگی، بی‌محورِ مقدار |
دستورالعمل استفاده
نقطه برای دادهٔ کم
انجام بده
شش ماه با نقطه: هر داده جدا دیده می‌شود.
انجام نده
بی‌نقطه، معلوم نیست داده کجاست و خط کجا فقط وصل‌کننده است.
چند سری، راهنما
انجام بده
دو خط با راهنما.
انجام نده
برچسب روی هر نقطهٔ دو سری روی هم می‌افتد؛ برچسب را برای یک سری نگه دارید.