Radar

نمودار راداری برای سنجش چند شاخص از یک مجموعه‌داده روی بومی دوبعدی.

کجا به کارش ببرید: وقتی به نمودار راداری نیاز دارید تا چند شاخص از یک مجموعه‌داده را با هم بسنجید. آرایه‌ای JSON از نام محورها و امتیازها را از راه ویژگی abilitys به <r-radar> بدهید.

داده از راه ویژگی abilitys و به‌شکل رشتهٔ JSON (آرایه‌ای از شیءها) داده می‌شود. چون ویژگی‌های HTML تنها رشته نگه می‌دارند، مقدار باید JSON معتبر باشد؛ درون کامپوننت با JSON.parse تجزیه می‌شود. میزبان <r-radar> اندازهٔ ذاتی ندارد، پس عرض و ارتفاع صریح به آن بدهید.

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"جان","scoreRate":"10"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

می‌توانید داده را دستوری هم از راه خصیصهٔ JS به نام abilitys تعیین کنید؛ این خصیصه هم آرایه می‌پذیرد (که دوباره به‌شکل رشته روی ویژگی نوشته می‌شود) و هم رشتهٔ JSON:

const radar = document.createElement('r-radar');
radar.abilitys = [
  { abilityName: 'جان', scoreRate: 10 },
  { abilityName: 'حمله', scoreRate: 90 },
  { abilityName: 'دفاع', scoreRate: 20 },
];
chart.append(radar);

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
`abilitys`	`string` / `Array`	`''`	دادهٔ نمودار به‌شکل رشتهٔ JSON (یا آرایه از راه خصیصهٔ JS)
`colorPolygon`	`string`	`var(--ran-radar-polygon-color)` / `#e6e6e6`	رنگ چندضلعی‌های هم‌مرکز شبکه
`colorLine`	`string`	`var(--ran-radar-line-color)` / `#e6e6e6`	رنگ خطوط محور و لبهٔ بیرونی
`fillColor`	`string`	`rgba(255,121,35,0.60)`	رنگ پرشدگی ناحیهٔ داده
`strokeColor`	`string`	`rgba(255,121,35,0.60)`	رنگ خط پیرامون ناحیه و نقطه‌های رأس
`sheet`	`string`	`''`	CSS تزریق‌شده به shadow DOM کامپوننت

هر مدخل آرایهٔ abilitys این کلیدها را می‌پذیرد:

کلید	نوع	الزامی	توضیح
`abilityName`	`string`	بله	متن برچسب محور
`scoreRate`	`number`	بله	مقدار روی آن محور؛ سقف شبکه `100` است
`backgroundColor`	`string`	خیر	رنگ زمینهٔ برچسب (پیش‌فرض شفاف)
`fontSize`	`number`	خیر	اندازهٔ قلم برچسب (پیش‌فرض متناسب با نمودار)
`fontColor`	`string`	خیر	رنگ متن برچسب (پیش‌فرض `--ran-color-text`)
`fontFamily`	`string`	خیر	خانوادهٔ قلم برچسب (پیش‌فرض `SimHei`)

یادداشت: colorPolygon، colorLine، fillColor و strokeColor بدون حساسیت به بزرگی و کوچکی حروف خوانده می‌شوند، پس چه ویژگی از ابتدا باشد و چه پس از mount عوض شود، درست ترسیم می‌شوند؛ به‌روزرسانی هرکدام نمودار را دوباره می‌کشد. برای استایلی که از پوسته پیروی کند، متغیرهای CSS پایین‌تر را ترجیح دهید.

دادهٔ نمودار `abilitys`

استایل برچسب هر محور (backgroundColor، fontSize، fontColor) را می‌توان روی مدخل‌های جداگانه تعیین کرد:

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"جان","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

رنگ چندضلعی شبکه `colorPolygon`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorPolygon="green"
  abilitys='[{"abilityName":"جان","scoreRate":"10"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

رنگ خط محور `colorLine`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorLine="blue"
  abilitys='[{"abilityName":"جان","scoreRate":"10"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

رنگ پرشدگی ناحیه `fillColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  fillColor="red"
  abilitys='[{"abilityName":"جان","scoreRate":"10"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

رنگ خط پیرامون ناحیه `strokeColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  strokeColor="blue"
  abilitys='[{"abilityName":"جان","scoreRate":"10"},{"abilityName":"حمله","scoreRate":"90"},{"abilityName":"دفاع","scoreRate":"20"},{"abilityName":"تسلط عنصری","scoreRate":"50"},{"abilityName":"شانس ضربهٔ بحرانی","scoreRate":"80"},{"abilityName":"آسیب بحرانی","scoreRate":"50"}]'
></r-radar>

دادهٔ نمونهٔ کامل

چون attribute در HTML تنها می‌تواند string حمل کند، داده‌ای که می‌دهید باید رشتهٔ json باشد که با JSON.parse دوباره به آرایه‌ای از شیءها تبدیل می‌شود؛ JSON بدشکل تجزیه نمی‌شود:

[
  {
    "abilityName": "جان",
    "scoreRate": "10",
    "backgroundColor": "red",
    "fontSize": "30",
    "fontColor": "blue"
  },
  {
    "abilityName": "حمله",
    "scoreRate": "90"
  },
  {
    "abilityName": "دفاع",
    "scoreRate": "20"
  },
  {
    "abilityName": "تسلط عنصری",
    "scoreRate": "50"
  },
  {
    "abilityName": "شانس ضربهٔ بحرانی",
    "scoreRate": "80"
  },
  {
    "abilityName": "آسیب بحرانی",
    "scoreRate": "50"
  }
]

متغیرهای CSS

رنگ‌های نمودار را می‌توان (به‌شکل واکنشی نسبت به پوسته) با ویژگی‌های سفارشی CSS روی میزبان هم تعیین کرد:

متغیر	پیش‌فرض	توضیح
`--ran-radar-polygon-color`	`var(--ran-color-border)` / `#e6e6e6`	رنگ چندضلعی شبکه
`--ran-radar-line-color`	`var(--ran-color-border)` / `#e6e6e6`	رنگ خط محور
`--ran-radar-fill-color`	`rgba(255,121,35,0.60)`	رنگ پرشدگی ناحیهٔ داده
`--ran-radar-stroke-color`	`rgba(255,121,35,0.60)`	رنگ خط پیرامون ناحیهٔ داده
`--ran-radar-width`	`100%`	عرض نگه‌دارندهٔ بوم
`--ran-radar-height`	`100%`	ارتفاع نگه‌دارندهٔ بوم
`--ran-radar-display`	`block`	`display` نگه‌دارندهٔ بوم
`--ran-radar-position`	`relative`	`position` نگه‌دارندهٔ بوم

رنگ متن برچسب‌ها هم به توکن پوستهٔ --ran-color-text برمی‌گردد، پس برچسب‌ها در حالت روشن و تیره خوانا می‌مانند.

رویدادها

ندارد. <r-radar> هیچ رویداد سفارشی‌ای ارسال نمی‌کند.

بهترین شیوه‌ها

اندازه‌گذاری: میزبان اندازهٔ ذاتی ندارد؛ همیشه width/height صریح بدهید (با style یا با متغیرهای --ran-radar-width/--ran-radar-height). نمودار با ResizeObserver تغییر اندازهٔ نگه‌دارنده را می‌فهمد و خودش دوباره کشیده می‌شود.
قالب داده: در abilitys فقط JSON معتبر بدهید؛ JSON بدشکل ثبت می‌شود و تجزیه‌شدنی نیست. وقتی در کد با آرایه‌های واقعی کار می‌کنید از خصیصهٔ JS به نام abilitys استفاده کنید.
مقیاس: scoreRate نسبت به بیشینهٔ ثابت 100 سنجیده می‌شود؛ مقدارهایتان را به همان بازه ببرید.
پوسته‌دهی: ویژگی‌های رنگ (colorPolygon، colorLine، fillColor، strokeColor) واکنشی‌اند و اگر پس از mount عوض شوند نمودار را دوباره می‌کشند. اگر می‌خواهید رنگ‌ها خودبه‌خود از پوستهٔ روشن/تیره پیروی کنند، متغیرهای --ran-radar-* را ترجیح دهید.