از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
ایجاد اولین نمودار جاوا اسکریپت تعاملی شما
داده ها در اطراف ما هستند و تجسم آن ها در حال حاضر به بخشی ضروری از زندگی ما تبدیل شده است. نمودارها، اینفوگرافیک ها، نقشه ها و داشبوردها امروزه تقاضای زیادی دارند زیرا اطلاعات را به گونه ای به ما ارائه می دهند که به راحتی قابل تفسیر باشد. نکته خوب این است که ترسیم نمودار به مهارت های زیاد یا دانش خاصی از توسعه دهندگان وب، طراحان یا هر کس دیگری نیاز ندارد. در این مقاله، اصول اولیه را به شما نشان می‌دهیم و روش مدیریت تجسم داده‌های تعاملی با استفاده از جاوا اسکریپت و HTML5 را به راحتی توضیح می‌دهیم. ما می خواهیم با ایجاد نمودار میله ای تک سری شروع کنیم تا بتوانید اصول اولیه را درک کنید. سپس روشی سریع برای ایجاد نمودارهای میله ای چند سری و پشته ای به شما نشان می دهیم. نمودارهای میله ای این روزها روشی محبوب برای ارائه داده ها هستند و منطق توسعه استفاده شده را می توان به راحتی به انواع دیگر نمودارها ترجمه کرد. نمودار نهایی خواهد بود این نمودار میله ای 100% انباشته شده:
قلم را ببینید پایانی (عنوان). نمودار میله ای انباشته شده 100% سفارشی توسط روسلان (@ruslankorsar) روی CodePen.
امروز وجود دارد بسیاری از کتابخانه های نموداری جاوا اسکریپت; برخی از آنها کاملا رایگان هستند مانند D3 و نمودارهای گوگل در حالی که دیگران برای استفاده تجاری نیاز به پرداخت دارند. به نظر من جامع ترین و قوی ترین آنها هستند amCharts، AnyChart، و نمودارهای برتر. برای این آموزش، تصمیم گرفتم از آن استفاده کنم AnyChart. با این حال process برای هر کتابخانه ای بسیار شبیه است، به خصوص اگر چیزی ساده بسازید. AnyChart گسترده است مستندات و مرجع API و همچنین تنوع زیادی از انواع نمودار پشتیبانی شده و دموها روی را کد زمین بازی، بنابراین انتخاب خوبی برای مبتدیان است. برای راحتی شما، تمام نمونه های تصویر شده در آموزش در دسترس هستند این مجموعه روی CodePen و می توان آن را همانجا کاوش کرد یا با فایل های نمایشی CSS/HTML/JavaScript به ZIP ها صادر کرد.
نمودار JS در 3 مرحله آسان
را process ایجاد یک نمودار پایه جاوا اسکریپت برای وب سایت یا برنامه شما شامل سه مرحله زیر است:
- داده های خود را آماده کنید؛
- اتصال کتابخانه؛
- یک کد ساده بنویسید
1. آماده سازی داده ها
همانطور که یک کشتی بزرگ آبهای عمیق می خواهد، یک نمودار ساده نیز داده های ساده می خواهد. البته اگر حجم زیادی از داده دارید یا ساختار آن مشخص نیست، ابتدا باید آن را آماده کنید. هنگام ساخت اکثر انواع نمودارهای محبوب، فقط به فیلدهای X و Y نیاز داریم. با این حال، نمودارهای میله‌ای می‌توانند حتی ساده‌تر باشند، زیرا اغلب اتفاق می‌افتد که فقط از فیلد Y استفاده می‌شود، و یک شاخص یا یک شماره مورد به عنوان X در نظر گرفته می‌شود. این مورد زمانی است که از یک آرایه داده جاوا اسکریپت استفاده می‌کنیم، برای مثال:
// 5 data points = 5 categories for a single series var data = (19, 24, 30, 34, 42); // Y is these values; X is item numbers (0,1,2,3,4,5)
اگر از JSON/XML برای انتقال داده استفاده می‌کنید، داده‌های شما می‌تواند به شکل زیر باشد.
({
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...)
به طور کلی، روش های زیادی برای کار با داده ها وجود دارد و توسعه دهندگان نرم افزار تجسم معمولاً همه یا بسیاری از آنها را در اسناد توصیف می کنند. با در نظر گرفتن این موضوع، توصیه می کنم بررسی کنید بخش مربوطه از اسناد کتابخانه نمودار شما.
2. گرفتن کتابخانه نمودار
کتابخانه‌ای که استفاده می‌کنید واضح است که در اینجا یک عنصر حیاتی است. اگر می خواهید از نمودارها به صورت محلی استفاده کنید، باید منطقی باشد دانلود بسته باینری و آن را در نزدیکی خود نگه دارید. با این حال، اگر به نمودارهایی برای یک برنامه وب یا a page روی یک وب سایت، سپس a CDN ممکن است گزینه بهتری باشد این فایل ها را از نزدیکترین سرور به مشتری شما بارگیری می کند و سرعت بیشتری به شما می دهد page بار و عملکرد بهتر
<script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
3. نوشتن یک کد ساده HTML/JavaScript
وقتی داده ها و کتابخانه ما آماده شد، می توانیم شروع به نوشتن کد کنیم تا در واقع نمودار خود را رسم کنیم. الف) ابتدا باید یک نمودار ایجاد کنیم container روی را page. بهترین راه استفاده از a
عنصر و شناسه آن را تنظیم کنید:
<div id="container"></div>
ب) پس از آن، بیایید داده های خود را اضافه کنیم:
var data = (
{x: 'DVD player', y: 19},
{x: 'Home theater system', y: 24},
{x: 'Karaoke player', y: 30},
{x: 'Projector', y: 34},
{x: 'TV receiver', y: 42}
);
ج) سپس با فراخوانی تابع سازنده مربوطه مشخص می کنیم که چه نوع نموداری را می خواهیم:
var chart = anychart.bar();
د) برای اینکه همه چیز برای بینندگان واضح تر شود، می خواهم به نمودار عنوانی بدهم:
chart.title('Product Sales');
ه) حالا بیایید یک سری ایجاد کنیم:
chart.addSeries(data); // or we can specify a simple dataset within the method: chart.addSeries((19, 24, 30, 34, 42));
و) نمودار ما باید در a قرار گیرد container، بنابراین ما یکی را که ایجاد کرده ایم مشخص می کنیم:
chart.container('container');
g) همه چیز خوب به نظر می رسد، بنابراین اکنون می توانیم نمودار خود را ترسیم کنیم:
chart.draw();
در اینجا نتیجه به نظر می رسد:
کد زیر برای راحتی شماست:
<html>
<head>
<script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
<script>
anychart.onDocumentLoad(function() {
var data = (
{x: 'DVD player', y: 19},
{x: 'Home theater system', y: 24},
{x: 'Karaoke player', y: 30},
{x: 'Projector', y: 34},
{x: 'TV receiver', y: 42}
);
var chart = anychart.bar();
chart.title('Product Sales');
chart.addSeries(data);
chart.container('container');
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
خیلی ساده به نظر می رسد، اینطور نیست؟ و اکنون می توانیم به راحتی کل فروش را بر اساس دسته بندی مقایسه کنیم.
ایجاد نمودارهای میله ای چند سری و انباشته
اکنون که اصول ترسیم نمودار با جاوا اسکریپت را آموختیم، می‌توانیم به ساخت یک نمودار کمی پیچیده‌تر که اطلاعات بیشتری را نشان می‌دهد، ادامه دهیم. همانطور که قبلاً گفتم، من یک راه آسان برای ایجاد نمودار میله ای چند سری و سپس یک انباشته به شما نشان خواهم داد. اصولاً رویه ها کاملاً مشابه هستند. مثل همیشه، همه چیز با داده ها شروع می شود.
داده ها از یک جدول
در زمینه نمودار میله ای بالا، یک متغیر (سری داده های فروش محصول) و چندین دسته (انواع محصول) داشتیم. برای نمایش ترکیب هر مقدار، که ماهیت نمودارهای میله ای انباشته است، به داده های دقیق تری نیاز داریم. برای این کار می توانیم از داده هایی که قبلا نمایش داده شده اند استفاده کنیم روی را page. به عنوان مثال، اگر از قبل یک جدول HTML دارید، می توانید به راحتی یک نمودار بر اساس آن بسازید روی آی تی. اگر از AnyChart استفاده می کنید ماژول آداپتور داده تنها چیزی که نیاز دارید این است که آن جدول را به عنوان منبع داده مشخص کنید. 1) آداپتور داده را دریافت کنید:
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
2) داده ها را از جدول آماده کنید:
var tableData = anychart.data.parseHtmlTable('#tableWithData');
3) یک نمودار ایجاد کنید و منبع داده را مشخص کنید:
var chart = anychart.bar(); chart.data(tableData);
نتیجه فوری یک نمودار میله ای چند سری است که به ما اجازه می دهد، برای مثال، به سرعت عملکرد هر محصول را در هر دسته مقایسه کنیم.
تغییر نوع سری
تمام جزئیات لازم، از جمله داده ها، قبلاً مشخص شده است. اکنون می‌توانیم نوع سری را تغییر دهیم و نمودار میله‌ای پشته‌ای را از آن نمودار چند سری معمولی دریافت کنیم. به هیچ وجه سخت نیست زیرا برای انباشته کردن مقادیر فقط به یک خط کد نیاز دارید:
chart.yScale().stackMode('values');
وویلا!
ما به تازگی یک نمودار میله ای پشته ای ایجاد کرده ایم روی پرواز بدون تغییر پیکربندی آن چند سری. در نتیجه، نه تنها اکنون آماده هستیم تا کل فروش را بر اساس دسته بندی مانند نمودار میله ای تک سری از همان ابتدای مقاله مقایسه کنیم، بلکه می توانیم تشخیص دهیم که کدام محصول مسئول کوچکتر یا بزرگتر کردن یک دسته از سایرین است. . از آنجایی که ما از قبل توافق کرده بودیم که هدف نهایی ما یک نمودار میله ای 100٪ پشته ای است، بیایید فقط حالت را تغییر دهیم تا آن را دریافت کنیم:
chart.yScale().stackMode('percent');
این یک نمودار میله‌ای 100% انباشته است که به شما امکان می‌دهد تا روابط جزء به کل را برجسته کنید و سهم هر محصول را در کل دسته ارزیابی کنید.
سفارشی سازی طراحی
طراحی در تجسم داده ها، برای جلب توجه، افزایش وضوح و حفظ یکپارچگی بصری در پروژه وب شما بسیار مهم است. به طور مفید با این کتابخانه نمودار، سفارشی سازی بسیار ساده است.
اضافه کردن متن
برای وضوح بیشتر، می توانید تجسم خود را با متون اضافی ارائه دهید. به عنوان مثال، من به محور عمودی یک عنوان می دهم و یک برچسب نمودار را به طور موقت اضافه می کنم:
chart.xAxis().title('Products');
chart.label({text: 'Classified!'});
تنظیمات رنگ
می توانید رنگ را از طریق یک پالت اضافه کنید (chart.palette()) و تنظیمات پس زمینه را تغییر دهید (chart.background()) در میان چیز های دیگر. یا می توانید از یک تم استفاده کنید:
<script src="https://cdn.anychart.com/themes/latest/wines.min.js" type="text/javascript"></script>
سپس باید آن را در تنظیمات نمودار مشخص کنیم:
anychart.theme(anychart.themes.wines);
تعامل نمودار
ایجاد یک نمودار جاوا اسکریپت حداقل کمی تعاملی کار بزرگی نیست. احتمالاً اساسی ترین رویکرد شامل فعال کردن حالت شناور است روی نقاط داده، برای تغییر رنگ آنها و یا اضافه کردن یا اصلاح نشانگرها. حالت انتخاب تعیین می کند که هر نقطه پس از کلیک کردن چگونه به نظر می رسد. برخی از تعاملات مبتنی بر شناور و انتخاب ساده به طور پیش‌فرض گنجانده شده است، بنابراین در حال حاضر قصد نداریم چیزی به مثال بالا اضافه کنیم. لطفاً در صورت تمایل برای بررسی تعامل اولیه به آن بازگردید. لازم است در مورد عنصر tooltip صحبت کنیم، که می تواند هنگامی که یک نقطه روی آن قرار می گیرد شناور شود. من همیشه سعی می‌کنم از راهنمایی‌های ابزار به‌خوبی استفاده کنم و از آنها اطلاعات مفیدی در مورد اینکه یک نقطه متعلق به کدام سری است، چه ارزشی را نشان می‌دهد و غیره نشان می‌دهند. می توانید به راحتی نکات ابزار خود را تنظیم کنید تا هر چیزی را نشان دهید. ما راهنمای ابزار را معرفی می کنیم و مشخص می کنیم که چه چیزی در آن نشان داده شود:
var tooltip = chart.tooltip();
tooltip.displayMode('union');
tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');
در اینجا نتیجه است:
این فقط یک نگاه کوتاه به گزینه های سفارشی سازی است، پرداختن به جزئیات به تنهایی یک مقاله کامل است. فعلاً پیشنهاد می‌کنم آن را بخوانید بخش تعامل از اسناد برای اطلاعات بیشتر
نتیجه
همانطور که می بینید، ساخت نمودارهای تعاملی با جاوا اسکریپت دشوار نیست. علاوه بر این، می توانید تمام نمونه های آموزش را در من پیدا کنید مجموعه روی CodePen و به راحتی از آنها در کار خود استفاده کنید. فقط کد را کپی کنید، داده های من را به شما تغییر دهید و پروژه خود را خیلی سریع راه اندازی کنید. لطفاً همیشه به یاد داشته باشید که اسناد و/یا مرجع API را بررسی کنید و همچنین به نسخه‌های نمایشی کتابخانه‌ای که استفاده می‌کنید، مانند این گالری AnyChart. معمولاً دیدن اینکه چیزی نزدیک به چیزی است که نیاز دارید پیچیده نیست، نمونه‌ای را پیدا کنید که مناسب‌تر باشد، برخی اصلاحات ساده را انجام دهید و سپس از آن به روشی که نیاز دارید استفاده کنید.
(برچسب‌ها برای ترجمه t) توسعه وب
منتشر شده در 1403-01-08 13:47:02
منبع نوشتار
