سفارشی کردن نمودارهای محوری

نمودارهای محوری Flexmonster را می توان سفارشی کرد و مطابق با نیازهای کاربر تنظیم کرد. فراخوانی customizeChartElement API امکان تنظیم رنگ برای عناصر نمودار، افزودن ویژگی های سفارشی و غیره را فراهم می کند.

این راهنما شامل بخش های زیر است:

• درباره روش customizeChartElement
• با استفاده از customizeChartElement
• تغییر رنگ های پیش فرض برای نمودارها

درباره روش customizeChartElement

متد customizeChartElement برای هر عنصر نمودار در طول رندر فعال می شود. به عنوان یک پارامتر، customizeChartElementFunction را می گیرد که دارای دو پارامتر است:

• عنصر HTML یا SVG که حاوی نمایش فعلی عنصر نمودار است و از طریق آن می توان نمایش عنصر را سفارشی کرد.
• ChartDataObject یا ChartLegendDataObject حاوی اطلاعات مربوط به عنصر نمودار.

برای کسب اطلاعات بیشتر در مورد فراخوانی customizeChartElement API و پارامترهای آن، به مستندات مراجعه کنید.

با استفاده از customizeChartElement

این مثال نحوه برجسته کردن عناصر نمودار حاوی اطلاعات ایالات متحده را بدون توجه به موقعیت آنها نشان می دهد:

مرحله 1. یک تابع ایجاد کنید تا بررسی کنید آیا داده ها حاوی عضو داده شده هستند یا خیر:

تابع حاوی (داده، عضو نام)>>if (data && data. columns)>> retu false;>

مرحله 2. به طور پیش فرض، همه اعضای فرزند سلسله مراتب زمانی که نمودار بزرگ می شود، سایه رنگ خاص خود را دارند. ما یک تابع برای تهیه یک سایه سفارشی برای هر کودک عضو ایالات متحده ایجاد خواهیم کرد. این تابع روشنایی رنگ پیش فرض عنصر را بازیابی می کند، آن را به رنگ سفارشی اعمال می کند و سایه ای به دست آمده را برمی گرداند:

function applyShade(newColor, oldColor) /* Get the lightness of the default color */ /* Here we divide it by 2 to adjust the default lightness and get a darker color as a result */ let colorLightness = tinycolor(oldColor).toHsl().l/2; /* Apply the lightness to the new color */ let result = newColor.toHsl(); result.l = colorLightness; /* Retu the created color shade */ retu tinycolor(result);>

این تابع از کتابخانه TinyColor برای تبدیل رنگ استفاده می کند، بنابراین کتابخانه را با اسکریپت زیر وارد پروژه خود کنید:

 src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js">

مرحله 3. اگر داده ها شامل عضو ایالات متحده است، عنصر نمودار مربوطه را با سایه مشخصی از بنفش رنگ کنید:

function customizeChartElementFunction(element, data) let newColor = tinycolor("#1a0019"); if (contains(data, "country.[united states]")) if (data.chartType == "pie") if (element.querySelector('path')) element.querySelector('path').style.fill = applyShade(newColor, element.querySelector('path').style.fill).toRgbString();>> else element.style.fill = applyShade(newColor, element.style.fill) .toRgbString();>>>

توجه داشته باشید نمودار دایره ای باید به طور جداگانه مدیریت شود زیرا دارای ساختار متفاوتی از عناصر نمودار است.

مرحله 4. رنگ مورد افسانه نمودار را به روز کنید:

function customizeChartElementFunction(element, data) // code from step 2 if (data && data.type == 'legend') if (data.member && data.member.uniqueName == "country.[united states]" && !data.isExpanded) element.querySelector(".fm-icon-display").style .backgroundColor = applyShade(newColor, data.color).toHexString();> if (data.tuple && isChild(data.tuple, data.member.uniqueName, "country.[united states]") && !data.isExpanded) element.querySelector(".fm-icon-display").style .backgroundColor = applyShade(newColor, data.color).toHexString();>>>

تابع isChild بررسی می کند که آیا عضو فعلی فرزند عضو مورد نظر (در مورد ما، عضو ایالات متحده) است یا خیر. تعریف آن به شرح زیر است:

تابع isChild(Tuple، Member، ParentMember) اجازه دهید i = 0; while (tuple[i]. uniqueName != Member)i++;> retu false;>

مثال کامل را در JSFiddle ببینید.

تغییر رنگ های پیش فرض برای نمودارها

یک مثال مفید دیگر نحوه تغییر رنگ های پیش فرض نمودارها را نشان می دهد، آن را در JSFiddle بررسی کنید. ما از . fm-charts-color-n برای تنظیم رنگ بخش نمودار n استفاده می کنیم. در این مثال شش رنگ را مشخص می کنیم. سکتور هفتم با fill: none مشخص شده است. از این ترفند استفاده می شود تا در صورت وجود بیش از شش بخش نمودار، رنگ های سفارشی تکرار شوند. اگر بخش هفتم مشخص نمی شد، Flexmonster از رنگ های خود استفاده می کرد.

بعدش چی؟

ممکن است به مقالات زیر علاقه مند شوید:

• نحوه سفارشی کردن شبکه
• چگونه نوار ابزار را سفارشی کنیم
• نحوه سفارشی سازی ظاهر
• نحوه سفارشی کردن منوی زمینه