از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
ایجاد نمودارهای خیره کننده با AngularJS
به عنوان شهروندان دنیای دیجیتال، ما دائماً مملو از داده ها هستیم. از تجزیه و تحلیل وب سایت گرفته تا ردیاب تناسب اندام ما، داده ها در اطراف ما هستند. در نتیجه، برای طراحان جلویی، ارائه داده‌ها به گونه‌ای که از سایر منابع داده‌ای که برای جلب توجه بیننده رقابت می‌کنند متمایز باشد، دشوارتر می‌شود. یکی از بهترین راه ها برای انتقال پیام خود استفاده از نمودارها و نمودارهای عالی است. آنها به شما امکان می دهند به سرعت توجه را به بینش های کلیدی جلب کنید و کشف الگوهایی را که مشاهده آنها دشوارتر است تنها با مشاهده داده های خام امکان پذیر می کنند. در این آموزش به صورت گام به گام توضیح خواهم داد process ایجاد نمودارهای خیره کننده به جای استفاده از HTML/CSS/JS ساده، تصمیم گرفتم از AngularJS استفاده کنم که یکی از محبوب ترین فریم ورک های جاوا اسکریپت در حال حاضر است. AngularJS پس از عبور از منحنی یادگیری اولیه، ایجاد برنامه های کاربردی وب را آسان تر می کند. به آرامی، اما به طور پیوسته، در سراسر جهان مورد استقبال گسترده قرار می گیرد. بنابراین اگر قبلا از Angular استفاده نمی کنید، احتمال زیادی وجود دارد که در آینده نزدیک این کار را انجام دهید. اکنون، بدون هیچ مقدمه ای، بیایید با آموزش شروع کنیم!
چهار مرحله برای ساخت نمودار در AngularJS
علاوه بر AngularJS، به یک جزء نمودار نیز نیاز داریم. برای این پروژه، من قصد دارم استفاده کنم FusionCharts. مجموعه خوبی از نمودارها دارد و یک نمودار اختصاصی ارائه می دهد پلاگین برای AngularJS. نگاهی اجمالی به چیزی که ما خواهیم ساخت:
قلم را ببینید نمودارهای AngularJS: ایجاد نمودارهای خیره کننده برای برنامه AngularJS شما توسط ویکاس (@vikaslalwani) روی CodePen.
برای درک آسان تر، این آموزش را به چهار مرحله زیر تقسیم کرده ام:
- شامل فایل های جاوا اسکریپت مورد نیاز
- برنامه AngularJS را ایجاد کنید
- کنترلر را تعریف کنید
- نمودار را رندر کنید
مرحله 0: داده های خود را آماده کنید
قبل از اینکه به ساخت نمودار بپردازیم، باید داده ها را جمع آوری کرده و بر اساس فرمت پذیرفته شده توسط کتابخانه نمودار ساختاربندی کنیم. FusionCharts هم JSON و هم XML را می پذیرد. ما قصد داریم از JSON استفاده کنیم زیرا رایج ترین فرمت مورد استفاده برای تبادل داده در برنامه های وب مدرن است. FusionCharts داده های JSON را به عنوان آرایه ای از اشیاء حاوی می پذیرد برچسب و ارزش:
({
"label": "United Kingdom",
"value": "80"
},{
"label": "Canada",
"value": "70"
})
از آنجایی که هر نمودار کاربرد متفاوتی دارد، باید JSON را مطابق نمودار خاصی که می‌خواهیم ترسیم کنیم، ساختار دهیم. در اینجا ترفند کوچکی وجود دارد که من از آن استفاده می‌کنم: من JSFiddle را برای نموداری که می‌خواهم از گالری کمانچه‌های نمودار FusionCharts درست کنم پیدا می‌کنم و قالب را کپی می‌کنم. سپس آن را با مقادیر خود جایگزین می کنم و اگر نقاط داده بیشتر یا کمتری داشته باشم آن را تنظیم می کنم. پس از آماده شدن داده ها، همه ما آماده ایم…
مرحله 1: شامل فایل های جاوا اسکریپت مورد نیاز
این به طور کلی اولین مرحله برای هر برنامه وب است که می سازید، و این مورد نیز تفاوتی ندارد. باید سه فایل جاوا اسکریپت اضافه کنیم روی برنامه ما به آن بستگی دارد:
- کتابخانه Core AngularJS: هر نسخه کوچک شده 1.x کار خواهد کرد.
- کتابخانه نمودارهای جاوا اسکریپت FusionCharts: همه فایل ها را در پوشه دانلود شده پیدا خواهید کرد.
- پلاگین نمودارهای AngularJS FC: این افزونه باید جداگانه دانلود شود.
ما فایل های بالا را با استفاده از <اسکریپت> تگ کنید و HTML بعد از مرحله 1 به این صورت است:
<head> <!-- AngularJS library --> <script type="text/javascript" src="https://www.webdesignerdepot.com/2016/03/creating-stunning-charts-with-angularjs/angular.min.js"></script> <!-- FusionCharts library--> <script type="text/javascript" src="fusioncharts.js"></script> <!-- Angular plugin --> <script type="text/javascript" src="angular-fusioncharts.min.js"></script> </head>
مرحله 2: برنامه AngularJS را ایجاد کنید
پس از افزودن وابستگی های بالا، برنامه AngularJS را ایجاد کرده و آن را تزریق می کنیم ng-fusioncharts ماژول، که افزونه ای است که ما از آن استفاده می کنیم. در اینجا روش انجام آن است:
var chartApp = angular.module('chartApp',("ng-fusioncharts"));
مرحله 3: کنترلر را تعریف کنید
مرحله بعدی این است که کنترلر Angular را برای برنامه خود تعریف کنیم. برای این، ما محدوده کنترلر را با تعریف نمودار Fusioncharts افزایش می دهیم. در اینجا روش دستیابی به آن است:
chartAapp.controller('chartController', function($scope) {
//chart definition
$scope.dataSource = {
"chart": {
"caption": "Sales - 2014 v 2015",
//more chart properties - explained later
},
"dataset": ({
"seriesname": "Bakersfield Central",
"lineAlpha": "55",
//more chart data
)
};
});
$scope.dataSource شامل پارامترهای پیکربندی نمودار و داده هایی است که برای رسم نمودار استفاده می شود. من فقط چند پارامتر را در قطعه کد بالا گنجانده ام تا از بهم ریختگی جلوگیری شود. اما، کارهای زیادی می توانید انجام دهید همانطور که بعداً توضیح خواهم داد.
مرحله 4: نمودار را رندر کنید
اکنون یک مرحله نهایی باقی مانده است. برای تکمیل آن، فقط علامت گذاری زیر را به فایل HTML خود در مکانی که می خواهید نمودار خود را ارائه دهید اضافه کنید:
<div ng-controller="chartController">
<fusioncharts
width="100%"
height="400"
type="msspline"
dataFormat="json"
dataSource="{{dataSource}}">
</fusioncharts>
</div>
در اینجا توضیح کوچکی در مورد ویژگی های استفاده شده در داخل می باشد نمودارهای ترکیبی دستورالعمل در قطعه کد بالا:
- عرض عرض نمودار را تعریف می کند container. اگر می‌خواهید نمودار شما کامل باشد، آن را 100٪ نگه دارید container عرض و پاسخگو باشد.
- ارتفاع ارتفاع نمودار را بر حسب پیکسل تعریف می کند.
- نوع نوع نموداری که رسم می شود را مشخص می کند. ما در حال ساخت چارت اسپلاین چند سری هستیم و نام مستعار دارد msspline. برای یافتن نام مستعار سایر انواع نمودار، به ویژگی های نمودار بروید page و نام نموداری را که می خواهید رسم کنید تایپ کنید.
- dataFormat قالبی را که در آن داده ها را تغذیه می کنیم (XML یا JSON) تعریف می کند.
- منبع اطلاعات شامل گزینه های پیکربندی نمودار و آرایه داده است.
رفتن از ابتدایی به خیره کننده
اگر مراحل بالا را به درستی دنبال کرده باشید، با نموداری به پایان می‌رسید که کار می‌کند، اما به هیچ وجه «خیره‌کننده» نیست. بنابراین چگونه می‌توانیم آن را شبیه نموداری کنیم که در ابتدا دیدید؟ وارد ویژگی های نمودار. ویژگی های نمودار به شما امکان می دهد زیبایی شناسی نمودار خود را کنترل کنید. به معنای واقعی کلمه صدها ویژگی وجود دارد که می توانید از آنها استفاده کنید تا به نمودار خود احساس دلخواه خود را بدهید. فقط به قسمت بالا بروید page و نام نموداری را که می خواهید سفارشی کنید تایپ کنید. برای نمودار ما، این است page که شامل تمام صفات است. توصیف تمام ویژگی هایی که در نمودار خود استفاده کرده ام ممکن نیست، اما مهمترین آنها را در زیر توضیح داده ام:
- baseFont: این ویژگی خانواده فونت های مورد استفاده را کنترل می کند روی نمودار شما می توانید از هر فونتی که دوست دارید استفاده کنید. در مثال خود، من از “Roboto Slab” استفاده کرده ام. فقط فایل فونت مربوطه را در HTML خود بگنجانید و شما آماده هستید.
- bgColor و بوم BgColor: این ویژگی ها به شما امکان می دهند رنگ پس زمینه را برای نمودار سفارشی کنید container و بوم آن شما می توانید هر کد رنگ هگزا را به عنوان مقدار این ویژگی ها تنظیم کنید.
- AnchorRadius: اگر متوجه شدید، دایره های کوچک مربوط به تمام نقاط داده وجود دارد. به آن دایره های کوچک لنگر می گویند. AnchorRadius به شما این امکان را می‌دهد تا میزان بزرگی آن حلقه‌ها را کنترل کنید.
- toolTipBgAlpha: این ویژگی شفافیت tool-tip را کنترل می کند. شما می توانید هر عددی را از 0 تا 100 ارسال کنید. 0 به معنای کاملا شفاف و 100 به معنای مات است.
حدس زدن معنای هر صفت با درک آن آسان تر می شود. اگر بتوانید آنچه را که نیاز دارید تصور کنید، احتمال زیادی وجود دارد که یک ویژگی برای آن پیدا کنید. و بس! ما یک نمودار کاری داریم که با AngularJS ساخته شده است. در زیر نظر خود را ارسال کنید یا به من پینگ کنید روی اگر در مورد آموزش من سوالی دارید توییتر. خوشحال میشم بتونم کمک کنم!
(برچسب‌ها به ترجمهcontainer
منتشر شده در 1403-01-11 22:14:03
منبع نوشتار
