اصول اولیه

هدف از این مقاله این است که شما را با AmCharts 4 آشنا کنید. برای اینکه غافل نشویم ، ما به جزئیات تنظیمات نمودار خاص و گزینه های پیکربندی نمی رسیم - این یک نکته برای سایر مقالات تخصصی تر است.

TypeScript / ES6 در مقابل JavaScript

برای خنثی کردن همه شک و تردیدها ، حتی اگر Amcharts 4 در TypeScript نوشته شده باشد ، شما را وادار نمی کند که از آن استفاده کنید. اگر از شما استفاده نمی کنید یا حتی نمی خواهید بدانید که TypeScript چیست ، این برای ما خوب است.

اگر از طرف دیگر ، شما در حال حاضر از TypeScript استفاده می کنید (اگر در حال ساخت برنامه هایی با Angular2+هستید) یا برخی دیگر از برنامه های ES6 ، از مزایای اضافی Amcharts 4 به جدول می آیی ، مانند Code Insight ، نوع چک قوی، و غیره.

خلاصه ، بله - می توانید از AmCharts 4 در برنامه های وانیل JavaScript ، صفحات وب منظم و همچنین در هر برنامه ES6 و TS استفاده کنید.

توجه داشته باشید کد TypeScript/ES6 و قطعه های جاوا اسکریپت ممکن است کمی متفاوت باشد. اطمینان حاصل کنید که برای کد مربوطه ، برگه مناسب را در قطعه کد انتخاب کنید.

الزامات

اصلی ترین و مهمترین نیاز AMCHARTS 4 پشتیبانی JavaScript و SVG است.

در حالی که این دو چیز جدیدی نیستند - همه مرورگرهای مدرن سالها پشتیبانی کامل از هر دو فناوری دارند - اما هنوز هم محدودیت های خاصی را برای پشتیبانی از سیستم عامل های میراث تحمیل می کند.

به عنوان مثال ، SVG در خط مرورگرهای Inteet Explorer در نسخه 9 معرفی شد. این بدان معنی است که V4 روی IE8 و زیر کار نمی کند.

این محدودیت از هر نسخه قبلی کتابخانه های AmCharts محکم تر است ، که از VML به عنوان یک بازپرداخت پشتیبانی می کند. ما معتقدیم که وقت آن است که حرکت کنیم ، و شروع به فراموش کردن فن آوری های دهه های قدیمی و مستهلک کنیم. امیدوارم که شما موافق باشید ؛).

در مورد V3 توجه داشته باشید

قبل از پرسیدن ، V4 با کد نوشته شده برای V3 یا سایر محصولات AmCharts سازگار نیست.

برای ساختن چیزی واقعاً اساسی ، ما مجبور شدیم این فداکاری را انجام دهیم. کشیدن 8 سال از پیکربندی میراث به خوبی پیش نرفت.

بنابراین ، حتی اگر بسته فعلی شما از Amcharts Experience در اینجا کمک بزرگی نخواهد کرد ، شما هنوز هم برای درمان هستید ، زیرا V4 قابلیت های داده را باز می کند و فراتر از آنچه قبلاً روی میز بود.

نصب و راه اندازی

AmCharts 4 از طریق تعدادی کانال در دسترس است. در زیر چند مورد تشریح خواهیم کرد.

NPM

می توانید از بسته رسمی NPM ما @AMCHARTS/AMCHARTS4 برای گرفتن V4 استفاده کنید و در برنامه خود نصب کنید. حتی تمام وابستگی های مورد نیاز را نیز به خود جلب می کند.

NPM نصب @amcharts/amcharts4

جنجال

برای کسانی که از نخ استفاده می کنند ، می توانید از دستور ADD آن برای نصب بسته رسمی NPM ما استفاده کنید:

نخ اضافه کنید @amcharts/amcharts4

CDN

تمام پرونده های کامپایل شده برای V4 نیز از طریق AmCharts CDN در دسترس است. فقط برچسب های خود را به https://cdn. amcharts.com/lib/4/ اشاره کنید. بشربه عنوان مثال.:

دانلود

شما می توانید بایگانی Zip Standalone را که شامل همه چیزهایی است که برای اجرای مستقل AMCHARTS 4 در صفحه بارگیری ما اجرا می کنید ، بارگیری کنید.

گیتوب

می توانید AmCharts 4 را مستقیماً از مخزن GitHub ما بگیرید.

GitHub بارگیری مستقل ارائه می دهد ، یا می توانید کل repo را کلون کنید. تماس شما.

نقشه های نقشه / داده های جغرافیایی

اگر می خواهید نقشه های جغرافیایی در حال ساخت باشید ، احتمالاً به پرونده های نقشه واقعی نیز احتیاج خواهید داشت. اینها در یک بسته خارجی @AmCharts/AmCharts4-Geodata قرار دارند. بنابراین مطمئن شوید که آن را نیز نصب کرده اید.

NPM

NPM نصب @amcharts/amcharts4-geodata

جنجال

نخ اضافه کنید @amcharts/amcharts4-geodata

کار با TypeScript / ES6

اگر از نمودارها در یک برنامه TypeScript / ES6 استفاده می کنید ، در ادامه بخوانید. در غیر این صورت به بخش بعدی که در مورد استفاده از AmCharts 4 در JavaScript خالص می پردازد ، پرش کنید.

ماژول

تمام عملکرد Amcharts 4 بر اساس عملکرد ، گروه بندی و در بخش های جداگانه قرار می گیرد.

یک ماژول مرکزی وجود دارد (بیایید آن را Core. ts بنامیم) که تمام قابلیت های اصلی مانند ارائه ، تعامل ، کنترل های مشترک و غیره را در خود جای داده است.

تمام عملکردهای مربوط به نمودار در ماژول دیگری قرار می گیرند: Charts. ts ، و کلیه عملکردهای مربوط به نقشه ها به ماژول دیگری: MAPS. TS.

شما همیشه به هسته اصلی (هسته) احتیاج دارید. و بسته به اینکه شما یک نمودار یا نقشه ایجاد کرده اید ، حداقل به یکی از ماژول ها با عملکرد واقعی نیاز دارید. در صورت ساخت هر دو ، باید هر دو را وارد کنید.

در برنامه TS خود ، به سادگی واردات ماژول هایی را که باید استفاده کنید انجام دهید.

همانطور که در بالا ذکر شد ، شما همیشه به ماژول اصلی نیاز خواهید داشت ، که در بسته AmCharts4 Core. ts نامیده می شود ، به علاوه ماژول عملکرد واقعی ، مانند ، مثلاً ، نمودارها.

برنامه معمولی شما چیزی شبیه به این خواهد داشت:

واردات * به عنوان am4core از "@amcharts/amcharts4/core" ؛واردات * به عنوان am4charts از "@amcharts/amcharts4/نمودارها" ؛

ما دوست داریم ماژول اصلی را به عنوان AM4Core وارد کنیم ، و تمام نمونه های ما و همچنین قطعه های کد در این وب سایت از این نام شیء استفاده می کنیم ، بنابراین پیشنهاد می کنیم همین کار را انجام دهید.

ایجاد نمودار

اکنون که ما به ماژول های وارداتی نیاز داریم ، بیایید یک نمودار واقعی ایجاد کنیم.

یک نمونه نمودار در V4 با استفاده از عملکرد Helper Create () که در شیء AM4Core موجود است ، فوری می شود.

این دو پارامتر طول می کشد:

• شناسه یک ظرف سند (مانند عنصر) یا مرجع آن. نمودار در آن ظرف ایجاد می شود.
• یک مرجع کلاس از نوع نمودار ما ایجاد می کنیم. برای نمودار پای این نمودار خواهد بود.

اجازه دهید نمودار = am4core. create ("ChartDiv" ، am4charts. piechart) ؛

لطفاً توجه داشته باشید که یک عنصر با شناسه "ChartDiv" باید از قبل در سند شما وجود داشته باشد. عملکرد آن را ایجاد نمی کند.

اکنون که نمونه نمودار داریم ، باید آن را پیکربندی کنیم تا در واقع چیزی را نمایش دهیم.

برای نمودار پای ، حداقل نیاز به ایجاد یک سری (am4charts. pieseries) و اضافه کردن داده ها خواهیم داشت.

در اینجا چگونه یک کد به نمودار پای کاملاً کارآمد ما می تواند به نظر برسد:

// واردات واردات * به عنوان am4core از "@amcharts/amcharts4/core" ؛واردات * به عنوان am4charts از "@amcharts/amcharts4/نمودارها" ؛// ایجاد نمودار نمودار اجازه دهید نمودار = am4core. create ("ChartDiv" ، am4charts. piechart) ؛// ایجاد سری PIE LET Series = Chart. Series. Push (جدید Am4Charts. Pieseries ()) ؛series. datafields. value = "لیتر" ؛series. datafields. categor = "کشور" ؛// اضافه کردن نمودار داده. data = [<"country": "Lithuania", "litres": 501.9>, <"country": "Czech Republic", "litres": 301.9>, <"country": "Ireland", "litres": 201.1>, <"country": "Germany", "litres": 165.8>, <"country": "Australia", "litres": 139.9>, <"country": "Austria", "litres": 128.3>, <"country": "UK", "litres": 99>, <"country": "Belgium", "litres": 60>, <"country": "The Netherlands", "litres": 50>] ؛// و ، برای یک اندازه گیری خوب ، بیایید یک نمودار افسانه اضافه کنیم. LEGEND = جدید am4charts. legend () ؛

اولین نمودار V4 شما وجود دارد که در TypeScript / ES6 قرار گرفته است.

کار با JavaScript

از جمله پرونده های مورد نیاز

برای صرفه جویی در منابع ، تمام قابلیت های AMCHARTS 4 در پرونده های جداگانه تقسیم می شوند ، که می توانید به عنوان برچسب در صورت تقاضا قرار دهید.

مهم وجود دارد که یک پرونده اصلی وجود دارد - Core. js - که تمام عملکردهای اصلی را در خود جای داده است. همیشه باید قبل از هر پرونده AmCharts JS دیگر گنجانده شود.

و پرونده های جداگانه ای برای کارکردهای نمودار (Charts. js) و برای نقشه برداری (maps. js) وجود دارد.

شما می توانید کسانی را که مستقیماً از AmCharts CDN قرار دهید ، وارد کنید:

یا بارگیری ، نصب و بارگیری از سرور خود ، به عنوان مثال:

اکنون که ما به پرونده های آماده نیاز داشتیم ، می توانیم ایجاد یک نمودار واقعی را شروع کنیم.

AMCHARTS 4 دو روش برای ایجاد نمودار و تنظیم پیکربندی آن در JavaScript: رویکرد مبتنی بر شی و JSON را ارائه می دهد.

بحث در مورد منفی و جوانب مثبت از هر دو روش فراتر از محدوده این مقاله است.(یک مورد جداگانه برای آن وجود دارد) ما فقط می خواهیم شما را بشناسیم تا هر دو را بشناسیم.

در مورد دامنه ها

در JavaScript ، تمام کلاس ها و عملکردهای اصلی AmCharts 4 از طریق Am4Core Global Object قابل دسترسی هستند.

کلاس ها و توابع اصلی ، مستقیماً در دسترس هستند ، مانند Am4Core. Create () ، Am4Core. Color () ، جدید Am4Core. Colorset () و غیره.

کلاس های مربوط به نمودار در Am4Charts Global Object ساکن هستند. عملکرد مربوط به نقشه برداری در AM4MAPS. این موارد از طریق اشیاء نسبی جهانی آنها ، به عنوان مثال قابل دسترسی هستند. am4charts. piechart یا am4maps. mapchart.

برخی از کلاس ها جهانی هستند و بنابراین از طریق چند تابع زیر نمودار قابل دسترسی هستند ، مانند مثال am4charts. legend ، am4maps. legend و غیره.

رویکرد مبتنی بر جسم

با استفاده از این رویکرد ، شما یک نمودار ایجاد می کنید و با ایجاد یک شیء نمودار ابتدا آن را پیکربندی می کنید ، سپس اضافه کردن اشیاء دیگر مانند سری و افسانه به آن ، و همچنین پیکربندی تمام آن اشیاء که روش های مربوطه خود را فراخوانی می کنند و/یا ویژگی های آنها را تنظیم می کنند.

تابع ایجاد یک نمونه نمودار am4core. create (کانتینر ، chart_type) است.

این دو پارامتر طول می کشد:

• کانتینر - شناسه یک کانتینر سند (مانند عنصر) یا اشاره ای به آن. نمودار در آن ظرف ایجاد می شود.
• Chart_Type - یک مرجع کلاس یا یک نام از نام کلاس که نمودار ایجاد شده را نشان می دهد. برای یک نمودار پای ممکن است بخواهیم از am4charts. piechart یا به سادگی "piechart" استفاده کنیم.

// از جمله از طریق کلاس مرجع VAR نمودار = am4core. create ("ChartDiv" ، am4charts. piechart) ؛// اما این نیز به همین ترتیب کار می کند: VAR نمودار = am4core. create ("ChartDiv" ، "Piechart") ؛

لطفاً توجه داشته باشید که یک عنصر با شناسه "ChartDiv" باید از قبل در سند شما وجود داشته باشد. عملکرد آن را ایجاد نمی کند.

در اینجا یک مثال کامل وجود دارد:

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

همه موارد فوق را می توان به عنوان یک شیء جاوا اسکریپت بیان کرد.(یا JSON)

یک آموزش اختصاصی در مورد پیکربندی مبتنی بر JSON وجود دارد ، بنابراین ما در اینجا به جزئیات نمی پردازیم ، فقط نسخه ای از پیکربندی مبتنی بر شیء فوق را ارائه می دهیم ، همانطور که در مورد One JSON Object:

توجه داشته باشید ، این بار در اطراف ما از عملکرد فوری نمودار مختلف استفاده می کنیم: am4core. CreateFromConfig ().

این دقیقاً مانند Am4Core. Create () کار می کند به جز اینکه انتظار دارد پیکربندی نمودار شیء JSON قبل از دو پارامتر دیگر منتقل شود.

پیچیدن

در حال حاضر ، شما باید بتوانید بدانید که برای ایجاد یک نمودار AMCHARTS 4 چه چیزی لازم است. احتمالاً ، شما از قبل می دانید از چه نوع فناوری ها و رویکردهایی استفاده خواهید کرد.

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

لطفاً توجه داشته باشید که همانطور که V4 جدید است ، مستندات مربوطه نیز وجود دارد. برخی از آن ناقص است ، برخی ممکن است نادرست یا کاملاً خالی باشند. لطفا با ما تحمل کنید.

اگر با TypeScript یا ES6 می روید ، احتمالاً این مقاله منطقی ترین مرحله است.

در مورد جاوا اسکریپت ساده تصمیم گرفتید؟برو اینجا.< Pan> در حال حاضر ، شما باید بتوانید بدانید که برای ایجاد نمودار AmCharts 4 چه چیزی لازم است. احتمالاً ، شما از قبل می دانید از چه نوع فناوری ها و رویکردهایی استفاده خواهید کرد.