انسان ها موجودات بصری هستند و نمودارها به طور گسترده ای برای تقویت UX در هنگام نمایش اطلاعات زیاد مورد استفاده قرار می گیرند. بگیر نمودارهای ونبرای مثال، که در نمایش مشترکات و تفاوت‌ها بین چندین مجموعه از آیتم‌ها عالی هستند. و امکان ایجاد یک تعاملی خوب برای یک صفحه وب یا برنامه بدون دردسر زیاد وجود دارد.
قبل از کریسمس در توییتر می چرخم، من مواجه شد یک نمودار جالب ون که بابا نوئل، سائورون، گاندولف و تام بامبدیل را مقایسه می کند. برای سرگرمی، آن را با استفاده از جاوا اسکریپت تکثیر کردم. به نظر می رسد که به اندازه کافی آسان است تا به من ایده ای در مورد آموزش نحوه ساخت سریع نمودارهای Venn مبتنی بر JS بدهد، که امیدوارم هم برای طراحان و هم برای توسعه دهندگان مفید باشد.
بنابراین، در اینجا من با مقاله هستم! گرافیک اصلی Tea with Tolkien که الهام بخش من بود به عنوان یک مثال گویا استفاده می شود – بیایید همین حالا این نمودار ون را در جاوا اسکریپت گام به گام بسازیم!
ساختن نمودار ون جاوا اسکریپت
ایجاد نمودار Venn با JS بسیار ساده است. به طور کلی، چهار مرحله اساسی وجود دارد که باید انجام دهید. اینها هستند:
- یک ظرف HTML ایجاد کنید
- شامل فایل های جاوا اسکریپت مورد استفاده
- داده هایی را که باید تجسم شوند اضافه کنید
- نمودار را کد کنید
1. یک ظرف HTML ایجاد کنید
یک صفحه HTML اصلی ایجاد کنید یا از یک صفحه موجود استفاده کنید. a اضافه کنید <div> عنصر را به عنوان ظرفی برای نمودار ون خود انتخاب کنید و به آن یک شناسه منحصر به فرد بدهید. می توانید اندازه کانتینر را 100% تعیین کنید تا نمودار کل صفحه را پر کند یا تنظیمات سبک را به دلخواه تنظیم کنید.
به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
</body>
</html>
- شامل فایل های جاوا اسکریپت مورد استفاده
من در اینجا به شما نشان خواهم داد که چگونه از کتابخانه جاوا اسکریپت برای ایجاد نمودار Venn استفاده کنید. کتابخانه‌های نمودار JS یک راه‌اندازی اساسی برای ساخت سریع تجسم داده‌ها با حداقل مقدار کد ارائه می‌کنند. موارد خوبی وجود دارد که می توانید به سرعت آنها را در گوگل پیدا کنید. در اینجا، من از کتابخانه AnyChart JS استفاده می کنم.
برای استفاده از هر کتابخانه نموداری جاوا اسکریپت، باید اسکریپت های JS مناسب لازم برای ایجاد گرافیک داده خود را پیوند دهید. برای یک نمودار ون در این مورد، ماژول های “core” و “venn” مورد نیاز هستند. این فایل ها قرار است در <script> برچسب از <head> بخش از صفحه HTML شما
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script>
// All the JS Venn diagramming code comes here.
</script>
</body>
</html>
3. داده هایی را که باید تجسم شوند اضافه کنید
برای این نمودار ون، داده ها بسیار ساده هستند. بنابراین می توان آن را به عنوان مجموعه داده ای که به عنوان آرایه ای از اشیاء سازماندهی شده است اضافه کرد. من داده‌ها را مستقیماً از تجسم اصلی گرفتم، و در اینجا چیزی به پایان رسید:
let data = [
{
x: "A",
value: 100,
name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow"
},
{
x: "B",
value: 100,
name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh"
},
{
x: "C",
value: 100,
name: "GANDALF\n\nwizard,\nfireworks"
},
{
x: "D",
value: 100,
name: "DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay"
},
{
x: ["A", "C"],
value: 40,
name: "special hat,\nlikes hobbits"
},
{
x: ["A", "B"],
value: 40,
name: "merry fellow,\nwife guy"
},
{
x: ["C", "D"],
value: 40,
name: "irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn"
},
{
x: ["B", "D"],
value: 40,
name: "teaches Elves to\nmake things,\nhas flying servants"
},
{
x: ["A", "B", "C"],
value: 30,
name: "benevolent,\nbig beard"
},
{
x: ["B", "C", "D"],
value: 30,
name: "giver of gifts,\nis coming to town\nbling bling"
},
{
x: ["A", "B", "D"],
value: 30,
name: "loves to sing,\nsees you"
},
{
x: ["A", "C", "D"],
value: 30,
name: "lives in\nmiddle-earth"
},
{
x: ["A", "B", "C", "D"],
value: 5,
name: "ancient,\npowerful,\nmysterious,\nmany names"
}
];
مرحله اصلی همه چیز آماده است. حالا، اجازه دهید آخرین مرحله برای زنده شدن نمودار JS Venn را به شما نشان دهم!
4. نمودار را کد کنید
شما باید فقط چند خط کد جاوا اسکریپت بنویسید تا یک تجسم نمودار Venn از مجموعه داده آماده ایجاد کنید. به یاد داشته باشید که همه آن را در داخل قرار دهید <script> برچسب ها در بدنه صفحه شما
مهمترین کاری که باید انجام دهید این است که تابعی را اضافه کنید که تضمین می کند کد فقط پس از بارگیری کامل صفحه وب اجرا می شود:
<script>
anychart.onDocumentReady(function() {
// The following JavaScript charting code comes here.
});
</script>
حال در داخل این تابع، داده های مرحله قبل را کپی کنید.
سپس از آن داده ها یک نمونه نمودار Venn ایجاد کنید:
let chart = anychart.venn(data);
از آنجایی که نمودار Venn باید مقدار متن را نشان دهد و نه مقدار شکل، تنظیمات برچسب را بر این اساس پیکربندی کنید:
chart.labels().format("{%Name}");
همچنین می‌توانید برای نمودار عنوانی قائل شوید تا مطمئن شوید که همه متوجه شده‌اند که نمودار ون شما چیست:
chart.title("Tolkien Venn Diagram");
در نهایت، به عنصر بلوک HTML که قبلا اضافه شده است مراجعه کنید (به مرحله اول مراجعه کنید) و نمودار را رسم کنید:
сhart.container("container");
chart.draw();
در اینجا، یک نمودار پایه جاوا اسکریپت Venn در حال اجرا است! آن را با کل کد زیر و در CodePen بررسی کنید [or on AnyChart Playground].
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script>
anychart.onDocumentReady(function() {
// adding data
let data = [
{
x: "A",
value: 100,
name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow"
},
{
x: "B",
value: 100,
name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh"
},
{
x: "C",
value: 100,
name: "GANDALF\n\nwizard,\nfireworks"
},
{
x: "D",
value: 100,
name: "DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay"
},
{
x: ["A", "C"],
value: 40,
name: "special hat,\nlikes hobbits"
},
{
x: ["A", "B"],
value: 40,
name: "merry fellow,\nwife guy"
},
{
x: ["C", "D"],
value: 40,
name: "irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn"
},
{
x: ["B", "D"],
value: 40,
name: "teaches Elves to\nmake things,\nhas flying servants"
},
{
x: ["A", "B", "C"],
value: 30,
name: "benevolent,\nbig beard"
},
{
x: ["B", "C", "D"],
value: 30,
name: "giver of gifts,\nis coming to town\nbling bling"
},
{
x: ["A", "B", "D"],
value: 30,
name: "loves to sing,\nsees you"
},
{
x: ["A", "C", "D"],
value: 30,
name: "lives in\nmiddle-earth"
},
{
x: ["A", "B", "C", "D"],
value: 5,
name: "ancient,\npowerful,\nmysterious,\nmany names"
}
];
// creating a venn diagram with the data
let chart = anychart.venn(data);
// setting the labels
chart.labels().format("{%Name}");
// setting the chart title
chart.title("Tolkien Venn Diagram");
// setting the container id
chart.container("container");
// drawing the diagram
chart.draw();
});
</script>
</body>
</html>
سفارشی کردن نمودار ون جاوا اسکریپت
- افسانه را غیرفعال کنید
- برچسب ها را تنظیم کنید
- رنگ های سفارشی را تنظیم کنید
- عنوان را تقویت کنید
- راهنمای ابزار را بهبود بخشید
- یک کاراکتر اضافی اضافه کنید
برای مروری بر این سفارشی سازی های نمودار پراکندگی JS، اینجا را به خواندن ادامه دهید.
