10 نمودار. نمودارهای مثال برای شروع کار

Chart. JS یک کتابخانه قدرتمند تجسم داده است ، اما من از تجربه می دانم که فقط شروع به کار و دریافت نمودار برای نمایش می تواند مشکل باشد. انواع مختلفی وجود دارد که می تواند اشتباه کند ، و من اغلب فقط می خواهم کاری داشته باشم تا بتوانم آن را شروع کنم.

این لیستی از 10 نمودار کار (نمودار نوار ، نمودار پای ، نمودار خط و غیره) با رنگ ها و داده های تنظیم شده برای ارائه نمودارهای مناسب و معقول است که می توانید در پروژه های خود کپی و چسبانده و به سرعت با سفارشی سازی و به سرعت برویدتنظیم دقیق برای ایجاد آنها متناسب با سبک و هدف شما.

برای استفاده از این مثالها ، حتماً شامل Chart. js نیز باشید:

این نمودارهایی هستند که ما از آن عبور خواهیم کرد (برای رسیدن به کد کلیک کنید):

1. نمودار نوار

نمودارهای نوار با تنظیم نوع به نوار ایجاد می شوند (برای چرخاندن جهت میله ها ، نوع را روی افقی تنظیم کنید). رنگ میله ها با عبور یک رنگ به پس زمینه کولور تنظیم می شوند (همه میله ها دارای یک رنگ یکسان هستند) یا مجموعه ای از رنگ ها.

اگر در حال عبور از آرایه ای هستید (مانند مثال زیر) ، رنگ ها به برچسب و شماره ای اختصاص می یابد که در آرایه های مربوطه همان شاخص را به اشتراک می گذارند. یعنی ، در زیر ، "آفریقا" اولین برچسب ، روی شماره 3E95CD (رنگ اول) و 2478 (شماره اول) تنظیم می شود.

نمودار نوار HTML و JavaScript

2. نمودار خط

نمودارهای خط با تنظیم نوع به خط ایجاد می شوند. به طور پیش فرض ، خطوط با یک شفاف شفاف تیره ، منطقه بین خط و محور x را پوشانده اند. من فکر می کنم این پر ها تمایل دارند خطوط دیگر را خنثی کنند ، بنابراین من آنها را در هر مجموعه داده در این مثال حذف کرده ام (پر: نادرست).

اگر می خواهید پر از تمام نمودارهای خط خود را حذف کنید ، یک روش کارآمدتر برای دستیابی به همان تأثیر ، تغییر پیش فرض جهانی برای پر کردن: Chart. Defaults. global. Elements. Line. fill = false ؛واد

نمودار خط: HTML و JavaScript

3. نمودار پای

نمودارهای پای با تنظیم نوع روی پای ایجاد می شوند. آنها تقریباً با نمودارهای پیراشکی یکسان هستند و با همان تنظیمات (بخشی از تغییر نوع) کار می کنند.

نمودار پای: HTML و JavaScript

4. نمودار رادار

نمودار رادار: HTML و JavaScript

نمودارهای راداری - که به عنوان نمودارهای وب نیز شناخته می شود ، نمودارهای عنکبوتی ، نمودارهای ستاره - با تنظیم نوع رادار ایجاد می شوند. نمودارهای رادار به طور معمول برای خواستن به فضای عمودی بیشتری نسبت به سایر نمودارها نیاز دارند ، بنابراین ممکن است مجبور شوید نسبت های نمودار را تغییر دهید.

5. نمودار منطقه قطبی

نمودار منطقه قطبی با تنظیم نوع به Polararea ایجاد می شود. نمودارهای منطقه قطبی از نزدیک با نمودارهای PIE ارتباط دارند ، با این تفاوت که علاوه بر زاویه هایی که اندازه نسبی نقاط داده را نشان می دهند ، شعاع هر عنصر در رابطه با مقدار آن تنظیم شده است.

نمودار قطبی: HTML و JavaScript

6. نمودار پیراشکی

نمودارهای پیراشکی با تنظیم نوع به دونات ایجاد می شوند. آنها تقریباً با نمودارهای پای یکسان هستند و همان تنظیمات را انجام می دهند.

نمودار پیراشکی: HTML و JavaScript

7. نمودار نوار افقی

نمودارهای نوار افقی با تنظیم نوع به HorizontalBar ایجاد می شوند. آنها از هر جنبه دیگری با نمودارهای معمولی نوار یکسان هستند و با همان تنظیمات کار می کنند.

نمودار نوار افقی: HTML و JavaScript

8. نمودار نوار گروهی

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

نوع هنوز هم نوار تنظیم شده است ، اما به محض اینکه بیش از یک شیء را به مجموعه داده ها منتقل کنید ، Chart. js گروه جدیدی از میله ها را برای هر شی ایجاد می کند. تنظیم رنگ برای آن گروه از میله ها با عبور از رنگ به پس زمینه کولور انجام می شود.

نمودار نوار گروه بندی شده: HTML و JavaScript

9. نمودار مختلط

می توانید چندین نمودار را مخلوط کرده و آنها را در بالای یکدیگر قرار دهید. این کار با تنظیم نوع به نوار انجام می شود (به عنوان مثال مخلوط یا خط - باید نوار باشد) ، و سپس تنظیم نوع نوار برای هر شیء مجموعه داده در آرایه مجموعه داده های شما.

برای تولید نمودار بالا ، به عنوان مثال ، ما چهار شیء داده داریم: دو تنظیم به نوار و دو تنظیم به خط ، در حالی که نوع برای شیء نمودار روی نوار تنظیم شده است.

نمودار مختلط: HTML و JavaScript

10. نمودار حباب

نکته آخر اینکه ، نمودار حباب وجود دارد ، مورد علاقه هانس روزلینگ. نمودارهای حباب می تواند برای تجسم بسیاری از نقاط مختلف داده به طور همزمان عالی باشد. در این مثال ، هر حباب از سه مقدار تشکیل شده است: موقعیت x ، موقعیت Y و اندازه (R) به ترتیب تولید ناخالص داخلی ، خوشبختی و جمعیت به ترتیب از هر کشور.

در مثال بالا ، من از شاخص شادی از گزارش جهانی خوشبختی برای موقعیت Y یک کشور استفاده می کنم ، تولید ناخالص داخلی از صندوق بین المللی پول برای تعیین موقعیت X و اندازه جمعیت برای تعیین اندازه حباب استفاده می کند.(توجه داشته باشید که من برخی از داده ها را در کد مثال حذف کرده ام تا میزان کدی را که باید کپی کنید کاهش دهم.)

شما می توانید چندین شی (تنظیم x ، y و x) را به هر آرایه داده در هر شیء مجموعه داده منتقل کنید (هر شیء حباب جدیدی ایجاد می کند) ، اما در این مثال من فقط از یک شیء در هر آرایه استفاده می کنم زیرا من هر حباب را می خواهمبرای داشتن یک رنگ و برچسب منحصر به فرد.

نمودار حباب: HTML و JavaScript

مراحل بعدی

امیدوارم بتوانید روند خود را شروع کرده و به سرعت با این نمودارهای الگو شروع کنید. Chart. js بسیار قابل تنظیم است ، بنابراین اگر می خواهید طراحی نمودارها را تغییر دهید ، توصیه می کنم در اسناد رسمی حفر کنید تا تمام پارامترهایی را که می توانید تغییر دهید ، کشف کنید.

اگر تازه وارد Chart. js هستید و می خواهید یک نمای کلی از کتابخانه دریافت کنید ، توصیه می کنم پست قبلی خود را بخوانید: تجسم داده ها با Chart. js: مقدمه.< Span> شما می توانید چندین شی (تنظیم x ، y و x) را به هر آرایه داده در هر شیء مجموعه داده منتقل کنید (هر شیء حباب جدیدی ایجاد می کند) ، اما در این مثال من از آنجا که من فقط از یک شیء در هر آرایه استفاده می کنماز هر حباب می خواهید یک رنگ و برچسب منحصر به فرد داشته باشد.