نمودار Html بر اساس نقاط آماده است. مروری بر کتابخانه های جاوا اسکریپت برای رسم. جی کوئری با افکت اسکرول چرخ ماوس

. خود اسکریپت، در مقایسه با مثال قبلی، ساختار خود را حفظ کرده و از دو بخش قابل ویرایش تشکیل شده است - داده های واقعی برای نمایش در نمودار و تنظیمات مختلف آن. از طریق پارامترهای hAxis و vAxis، برای وضوح، عنوان محورها را اضافه می کنیم.

خلاصه

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

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

اسناد سرویس به روسی ترجمه نشده است و فقط به زبان انگلیسی در دسترس است، که می تواند برخی از کاربران را بترساند. فقط یک مانترا برای این وجود دارد - یادگیری زبان.

مروری کوتاه بر کتابخانه های جاوا اسکریپت برای رسم

نمودارهای برتر

Highcharts یک کتابخانه نمودار خالص HTML5/JavaScript است که نمودارهای تعاملی بصری را برای وب سایت یا برنامه وب شما ارائه می دهد. نمودارهای برتردر حال حاضر از انواع خطوط خط، اسپلاین، ناحیه، ناحیه، ستون، میله، پای، پراکندگی، سنج‌های زاویه‌ای، محدوده، محدوده، محدوده ستونی، حباب، نمودار جعبه، میله‌های خطا، قیف، آبشار و انواع نمودار قطبی پشتیبانی می‌کند.

نمودارهای گوگل

نمودارهای گوگل - نمودارهای متنوعی را ارائه می دهد که برای راه حل های تجسم داده ها طراحی شده اند. این نمودارها مبتنی بر فناوری خالص HTML5/SVG (پذیرش VML برای نسخه‌های قدیمی‌تر IE) هستند، بنابراین نیازی به پلاگین نیست. همه آنها تعاملی هستند و بسیاری از آنها قابل پانل و مقیاس پذیر هستند. افزودن این نمودارها به یک صفحه را می توان در چند مرحله آسان انجام داد.

CanvasJS

CanvasJS - استفاده آسان از HTML5 و کتابخانه جاوا اسکریپت نمودار، بر روی عنصر ساخته شده است بوم. نمودارها را می توان روی نمایش داد دستگاه های مختلف، شامل دستگاه های تلفن همراه، آیپد، اندروید، تلفن ویندوز، مایکروسافت سرفیس، در کامپیوترهای رومیزیو غیره. این به شما امکان می دهد گرافیک های کاربردی ایجاد کنید که بر روی همه دستگاه ها بدون به خطر انداختن قابلیت نگهداری یا عملکرد برنامه وب شما کار می کند. CanvasJSدارای تم های زیبا است و 10 برابر سریعتر از فلش معمولی و نمودارهای SVG بارگذاری می شود - که منجر به نمودارهایی سبک و زیبا می شود.

ChartJS

نمودار JS - کتابخانه نموداری سبک و شی گرا در سمت مشتری.

RGraph

RGraph یک کتابخانه بوم HTML5 و جاوا اسکریپت برای ساختن نمودارهای وب با پشتیبانی از بیش از بیست است. انواع مختلفتجسم. RGraph نمودارهای HTML5 را در داخل یک مرورگر وب ایجاد می کند جاوا اسکریپتو تگ کنید بوم.

• ترجمه

تصور داشبورد بدون نمودار و نمودار تقریباً غیرممکن است. آنها داده های آماری پیچیده را به سرعت و کارآمد نمایش می دهند. علاوه بر این، یک نمودار خوب همچنین طراحی کلی سایت شما را بهبود می بخشد.

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

اگرچه اکثر کتابخانه ها رایگان و منبع باز هستند، برخی از آنها نسخه های پولی با قابلیت های اضافی دارند.

D3.js - اسناد داده گرا

امروزه، وقتی به نمودارها فکر می کنیم، اولین چیزی که به ذهن می رسد این است که D3.js یک پروژه متن باز است، بدون شک D3.js ویژگی های مفید زیادی را به همراه دارد که اکثر کتابخانه های موجود فاقد آن هستند. ویژگی هایی مانند «Enter and Exit»، انتقال های قدرتمند و نحوی شبیه به jQuery یا Prototype آن را به یکی از بهترین کتابخانه های جاوا اسکریپت برای ایجاد نمودارها و نمودارها تبدیل کرده است. در D3.js، آنها با استفاده از HTML، SVG و CSS تولید می شوند.

برخلاف بسیاری دیگر از کتابخانه‌های جاوا اسکریپت، D3.js دارای نمودارهای از پیش ساخته شده نیست. با این حال، برای دریافت یک ایده کلی می توانید به لیست نمودارهای ایجاد شده با D3.js نگاهی بیندازید.

D3.js با مرورگرهای قدیمی مانند IE8 به درستی کار نمی کند. اما همیشه می توانید از افزونه هایی مانند پلاگین ight برای سازگاری بین مرورگرها استفاده کنید.

D3.js به طور گسترده در وب سایت هایی مانند NYTimes، Uber و Weather.com استفاده شده است.

نمودارهای گوگل

Google Charts یک کتابخانه جاوا اسکریپت است که من به طور منظم از آن برای ایجاد نمودارهای ساده و آسان استفاده می کنم. بسیاری از نمودارهای از پیش ساخته شده مانند نمودارهای میله ای ترکیبی، نمودارهای ستونی، نمودارهای تقویم، نمودارهای دایره ای، طرح های جغرافیایی و موارد دیگر را ارائه می دهد.

نمودارهای گوگل همچنین تنظیمات پیکربندی زیادی دارد که به شما کمک می کند ظاهر نمودار خود را تغییر دهید. نمودارها با استفاده از HTML5/SVG برای اطمینان از سازگاری بین مرورگرها و قابلیت حمل چند پلتفرمی برای iPhone، iPad و Android ایجاد می‌شوند. همچنین حاوی VML برای پشتیبانی از نسخه های قدیمی IE است.

HighchartsJS

Highcharts JS یکی دیگر از کتابخانه های نمودار بسیار محبوب است. همراه با تعداد زیادی انیمیشن از انواع مختلف است که می تواند توجه زیادی را به سایت شما جلب کند. مانند سایر کتابخانه ها، HighchartsJS شامل تعداد زیادی نمودار از پیش ساخته شده است: spline، curly، ترکیبی، نوار، هیستوگرام، پای، scatter و غیره.

یکی از بزرگترین مزایای استفاده از HighchartsJS سازگاری با مرورگرهای قدیمی مانند Internet Explorer 6 است. مرورگرهای استاندارد از SVG برای ارائه نمودارها استفاده می کنند. در IE قدیمی، گرافیک ها از طریق VML ساخته می شوند.

اگرچه HighchartsJS برای استفاده شخصی رایگان است، اما برای استفاده تجاری باید مجوز خریداری کنید.

فیوژن چارت ها

Fusioncharts یکی از کتابخانه های قدیمی جاوا اسکریپت است که برای اولین بار در سال 2002 منتشر شد. برای قابلیت حمل و سازگاری بهتر، نمودارها با استفاده از HTML5/SVG و VML تولید می شوند.

برخلاف بسیاری از کتابخانه ها، Fusioncharts توانایی تجزیه داده های JSON و XML را فراهم می کند. همچنین می توانید این گرافیک ها را در 3 فرمت مختلف PNG، JPG و PDF صادر کنید.

Fusioncharts با مرورگرهای قدیمی مانند IE6 بسیار سازگار است. و به همین دلیل در بسیاری از سازمان های تجاری به یکی از محبوب ترین کتابخانه ها تبدیل شده است.

شما می توانید از نسخه واترمارک شده Fusioncharts به صورت رایگان در پروژه های شخصی و تجاری استفاده کنید. با این حال، برای خلاص شدن از شر واترمارک باید مجوز خریداری کنید.

ناوگان

Flot یک کتابخانه جاوا اسکریپت برای جی کوئری است که به شما امکان ایجاد نمودارها/نمودارها را می دهد. یکی از قدیمی ترین و محبوب ترین کتابخانه های نمودارسازی.

Flot از نمودارهای میله ای، نمودارهای پراکنده، نمودارهای میله ای، نمودارهای ستونی و هر ترکیبی از این انواع نمودار پشتیبانی می کند. همچنین با مرورگرهای قدیمی مانند IE 6 و Firefox 2 سازگار است.

Flot کاملا رایگان است، پشتیبانی تجاری در صورت درخواست ویژه برای توسعه دهنده در دسترس است. در اینجا لیستی از نمونه های نمودار ایجاد شده با Flot آمده است.

amCharts

amCharts بدون شک یکی از زیباترین کتابخانه های نموداری موجود است. این به طور کامل به 3 نوع مستقل تقسیم می شود: نمودارهای جاوا اسکریپت، نمودارهای نقشه (amMaps) و نمودارهای سهام.

AmMaps مورد علاقه من از سه مورد فوق است. ویژگی هایی مانند نقشه های حرارتی، ترسیم خطوط، افزودن متن به نقشه، آپلود نمادها یا عکس ها در بالای نقشه، بزرگنمایی و غیره را ارائه می دهد.
amCharts از SVG برای ارائه نمودارها استفاده می کند که فقط در مرورگرهای مدرن کار می کند. ممکن است نمودارها در IE زیر نسخه 9 به درستی نمایش داده نشوند.

نمودار EJS در نسخه های رایگان و پولی موجود است. نسخه رایگان محدودیتی دارد که به شما اجازه نمی دهد از بیش از 1 نمودار در هر صفحه و بیش از دو دنباله (عددی) در هر نمودار استفاده کنید. جزئیات قیمت را بررسی کنید.

uvCharts

uvCharts یک کتابخانه جاوا اسکریپت منبع باز است که ادعا می کند بیش از 100 گزینه پیکربندی دارد. این دارای نمودارهایی برای 12 استاندارد مختلف است.

UvCharts بر روی کتابخانه D3.js ساخته شده است. این پروژه نوید حذف تمام ظرایف پیچیده کدنویسی D3.js و اجرای آسان نمودارهای نمای استاندارد را می دهد. uvCharts با استفاده از SVG، HTML و CSS تولید می شود.

نتیجه

اکنون انتخاب بهترین کتابخانه نمودار برای پروژه های آینده شما به عهده شماست. توسعه دهندگانی که خواهان کنترل کامل بر نمودارها هستند، قطعاً D3.js را انتخاب می کنند.تقریباً همه کتابخانه های فوق از پشتیبانی خوبی در انجمن های Stackoverflow برخوردار هستند.

امیدوارم از این مقاله لذت برده باشید. روز خوبی داشته باشید.

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

1. jqPlot - یک افزونه JQuery همه کاره و قابل توسعه برای نقشه برداری

jqPlot- پلاگین جی کوئریبرای ترسیم در جاوا اسکریپت
jqPlot تولید می کند خطوط زیبا، نمودارهای میله ای و دایره ای با ویژگی های بسیار:
سبک های نمودار متعدد
داده ها روی یک محور با قالب بندی سفارشی.
حداکثر 9 محور Y.
چرخش متن محور.
محاسبه خط روند خودکار
نکات پاپ آپ
راحتی در استفاده.

2. کتابخانه تجسم Dygraphs

Dygraphs یک کتابخانه منبع باز است که نمودارهای سری زمانی تعاملی و مقیاس پذیر را ایجاد می کند. این برای نمایش مجموعه داده های متراکم طراحی شده است و به کاربران امکان می دهد آنها را کاوش و تفسیر کنند.

ویژگی ها:
نمایش سری های زمانی بدون استفاده از سرورهای خارجی یا انیمیشن فلش
در اینترنت اکسپلورر کار می کند (با استفاده از excanvas)
اندازه کوچک (69 کیلوبایت)
مقادیر را در حالت شناور نمایش می دهد
زوم تعاملی
میانگین دوره قابل تنظیم
سازگار با Google Visualization API
http://dygraphs.com/

3. Highcharts - نمودارهای تعاملی جاوا اسکریپت برای وب سایت شما

Highcharts یک کتابخانه نموداری است که در آن نوشته شده است جاوا اسکریپت خالص، ارائه نمودارهای تعاملی برای وب سایت یا برنامه وب شما. Highcharts در حال حاضر از انواع نمودارهای خط، اسپلاین، ناحیه، ناحیه، ستون، میله، پای، پراکندگی، سنج زاویه، محدوده منطقه، محدوده ستونی، محدوده ستونی و قطبی پشتیبانی می کند.

4. جی کوئری با افکت اسکرول چرخ ماوس

از PNG یا JPG sprites استفاده نمی کند.
رویدادهای لمسی، چرخ ماوس و صفحه کلید را کنترل می کند.
http://anthonyterrien.com/knob/

5. اندیکاتورهای شیک در CSS3

نشانگرهای شیک و متحرک با استفاده از CSS3.
http://www.red-team-design.com

6. Highcharts با جی کوئری

Highcharts یک کتابخانه نموداری سازگار با JQuery و Mootools است. با تمام مرورگرهای وب استاندارد سازگار است و از داده های JSON برای ساخت یک نمودار استفاده می کند. پشتیبانی از چندین نوع نمودار خط، خطوط، ناحیه، ناحیه، ستون، نوار، پای و نمودار پراکندگی.
highcharts.com

7. گراف متحرک در HTML5 و jQuery

نمودار دایره ای زیبا و تعاملی با استفاده از آخرین فناوری ها HTML5. از فلش استفاده نمی کند.

8. نمودار تجربی CSS3

این روش نمونه ای از ساخت نمودارهای آزمایشی در CSS3، بدون جاوا اسکریپت یا تصاویر است. استفاده از انتخابگرهای CSS3 واقعاً چشمگیر است: تبدیل، شیب و انتقال در حال استفاده. متاسفانه در IE پشتیبانی نمی شود.

9. نمودار JQuery و HTML5 دیگر

افزونه Visualize عناصر کلیدی محتوای را به روشی ساختاریافته تجزیه و تحلیل می کند. جدول HTMLو از HTML5 برای تبدیل آنها به نمودار یا نمودار استفاده می کند. به عنوان مثال، در یک جدول داده، ردیف ها می توانند به عنوان نمودار میله ای، خطی یا گوه ای عمل کنند. Visualize همچنین به طور خودکار حداکثر و را بررسی می کند حداقل مقداردر جدول و از آنها برای محاسبه مقادیر محور x برای خط و هیستوگرام استفاده می کند. در نهایت، این افزونه شامل دو متفاوت است سبک css- روشن و تاریک که می تواند همانطور که هست استفاده شود، یا می تواند به عنوان نقطه شروع برای سفارشی کردن نمودارها و نمودارها باشد.