مدخلطرق عرض رسومية Jquery. كيفية إنشاء رسم بياني تفاعلي باستخدام CSS3 و jQuery
غالبًا في تطبيقات الويب أو البرامج ، نحتاج إلى تقديم بعض المعلومات للمستخدمين. في السابق ، كانت المعلومات مثل إحصاءات حركة المرور أو النقرات تُقدم عن طريق اختبار وأرقام بسيطة. هذه الطريقة بسيطة للغاية وقد تم إهمالها بالفعل.
مع تحسن الإنترنت ، يجب جمع المزيد من البيانات وحسابها. لذلك ، من غير المحتمل أن يكون عرض النتائج في نص عادي بنفس الفعالية. اليوم ، تم استبدال النص برسوم بيانية ورسوم بيانية ، يمكن من خلالها الوصول إلى المعلومات وفهمها للمستخدمين. حرفيًا ، في لحظة ، من خلال النظر إلى الرسم التخطيطي ، يمكن للمستخدم تحديد مقدار الزيادة أو النقصان في حركة المرور التي زادت منذ آخر فحص. يساعد هذا في تسريع عملية تحديد بيانات محددة من المعلومات المحسوبة.
هناك العديد من الطرق المختلفة لعرض المعلومات ، ولكن الغرض من كل مكون رسومي (مخطط دائري ، رسم بياني شريطي ، وما إلى ذلك) هو نفسه - لتحويل الأحرف والأرقام إلى نسب مئوية وعرضها بشكل مرئي.
قدمنا أدناه قائمة بمكتبات المخططات التي قد تكون مفيدة لك إذا قررت عرض قراءاتك النصية في شكل رسم بياني.
- مكتبات الرسوم البيانية والمخططات
Axiis عبارة عن منصة مجانية لعرض البيانات تم تصميمها للمبتدئين والمطورين المتقدمين على حدٍ سواء. يمكنه إنشاء مكونات تجسيد أولية ونماذج مجردة وفئات صور ، مما يسمح لك بإنشاء عروض فريدة.
Am Charts عبارة عن مجموعة من مخططات الفلاش لمواقع الويب أو المنتجات المستندة إلى الويب. تسمح لك Am Charts باستخراج المعلومات من ملفات CSV أو XML البسيطة ، أو يمكنهم قراءة البيانات الديناميكية وتحويلها باستخدام PHP و .NET و Java و Ruby on Rails و Perl و ColdFusion والعديد من لغات البرمجة الأخرى.
Deensoft هي مكتبة مجانية جديدة تستخدم Prototype و Canvas لإنشاء مخططات جذابة. خدم Flot و Flotr و PlotKit كمحفزات قوية لهذه المكتبة. الهدف من المكتبة هو أقصى درجات حرية التصميم وسهولة الاستخدام.
Ejschart سهل التصميم حقًا. تمنحك مخططات جافا سكريبت Emprise جميع الأدوات التي تحتاجها لنشر البيانات التي تحتاجها بسرعة في مجموعة متنوعة من التنسيقات. ستصبح مخططات جافا سكريبت Emprise بالتأكيد أداتك المفضلة نظرًا لقدراتها الواسعة ونظام الاستخدام البسيط.
سيسمح لك Ezcomponents بإنشاء رسوم بيانية بأشكال مختلفة. سيسمح لك محرك التصدير بإنشاء صور بتنسيقات مختلفة من الرسوم البيانية ، بالإضافة إلى كل من الإصدارات ثنائية وثلاثية الأبعاد.
يستخدم Filamentgroup جافا سكريبت لاستخراج البيانات من جداول HTML وإنشاء مخططات باستخدام عنصر Canvas في HTML 5. تحتوي الأداة الآن على كود طرف ثالث تم تجميعه كمكوِّن إضافي jQuery جديد.
Flot هي مكتبة جافا سكريبت للرسم الخالي من العيوب في jQuery. باستخدام هذه الأداة ، يمكنك إنتاج رسومات بيانية. ينصب التركيز على سهولة الاستخدام (يمكنك استخدام العديد من الخيارات) ، والتصميم الجذاب ، وغيرها من الميزات المفيدة.
بشكل عام ، الرسوم البيانية المتحركة عبارة عن مجموعة من ملفات SWF التي توفر القدرة على تصور البيانات. باستخدام الرسوم البيانية المتحركة ، يمكنك إنشاء مخططات مضغوطة وتفاعلية وملفتة للنظر في دقيقة واحدة. لا تتطلب الأداة أي عمليات تثبيت ويمكن أن تعمل مع أي لغة برمجة نصية.
يمكن استخدام الرسوم البيانية فيوجن بسهولة في تطبيقات الويب الديناميكية ، والمواقع الثابتة ، ويمكن دمجها مع جافا سكريبت لإنشاء تطبيقات AJAX. يمكن أن تظهر لك العروض التوضيحية جيدًا ما يمكنك القيام به مجانًا في Fusion Charts.
تعد Google Chart API أداة بسيطة للغاية يمكنك من خلالها إنشاء مخططات من البيانات وتضمينها في صفحة ويب. يمكنك دمج المعلومات وتنسيق المعلمات من خلال طلبات HTTP ، وتعطيك Google صورة PNG رسومية ردًا على ذلك. يتم دعم العديد من تنسيقات المخططات المختلفة ، ومن خلال تقديم طلب لعلامات الصور ، يمكنك بسهولة إدراج مخطط في صفحة ويب.
Style Chart هي تقنية مبتكرة تتيح لك إنشاء مخططات ديناميكية لمواقع الويب الخاصة بك. سيعلمك هذا الدليل بكل إمكانيات مخطط النمط.
Bluff هو منفذ JavaScript لمكتبة رسومات Gruff لـ Ruby. تم تصميم الأداة لدعم جميع ميزات Gruff ، ولكن مع الحد الأدنى من الاختلافات.
JFreeChart هي مكتبة مخططات Java كاملة تتيح للمطورين إنشاء مخططات احترافية في تطبيقاتهم. تتميز الأداة بتصميم مرن يسهل تغييره أو تحسينه ، ويستهدف التطبيقات لكل من المطورين والعملاء.
يتم التحكم في حساب ورسم الخطوط والفؤوس والظلال وحتى الشبكات من خلال عروض المكونات الإضافية. القدرة على تحرير ليس فقط عناصر الرسم ، يمكن أن يوسع المكون الإضافي الوظائف بالكامل.
مخططات JS هي منشئ مخططات جافا سكريبت التي تتطلب إما رمزًا صغيرًا أو لا شيء على الإطلاق! تسمح لك مخططات JS بإنشاء مخططات من قوالب مختلفة بسهولة (شريط ، دائري ، إلخ).
Plotkit هي مكتبة JS لرسم الرسوم البيانية والمخططات. هناك أيضًا دعم HTML و SVG من خلال Adobe SVG Viewer.
قدرة كبيرة على إنشاء مخططات ورسوم بيانية جذابة من بيانات XML. يوفر XML إمكانات مرنة لتوليد البيانات ، ويوفر Flash أفضل المخططات والرسوم البيانية الممكنة.
18.
pChart هو إطار عمل موجه لفئة PHP مصمم لإنشاء مخططات أنيقة. يمكن طلب المعلومات من ملفات SQL أو CSV أو إدخالها يدويًا.
الغرض من أداة gRaphael هو إنشاء مخططات جذابة لموقع الويب الخاص بك. تعتمد الأداة على مكتبة رسومات رافائيل. تحقق من العرض التوضيحي لإلقاء نظرة متعمقة على الرسوم البيانية الثابتة والتفاعلية أثناء العمل.
Visifire عبارة عن مجموعة من أدوات تصور البيانات المجانية التي طورتها Microsoft Silverlight و WPF. يمكن استخدام Visifire مع تطبيقات WPF و Silverlight. باستخدام نفس واجهة برمجة التطبيقات ، يمكن تعديل المخططات في بيئتي WPF و Silverlight في دقيقة واحدة فقط!
- ابدأ بالرسم!
على الرغم من أن بعض المكتبات لا تزال تتطلب الحد الأدنى من المعرفة البرمجية ، وبعضها قد يكون معقدًا ومربكًا للغاية ، إلا أنها تهدف جميعًا إلى توفير العملية الأكثر كفاءة لإنشاء التصورات والمخططات والرسوم البيانية. في الواقع ، كلما زاد إرباك المكتبة ، زادت احتمالات إنشاء مشروع معين.
إذا نسينا ذكر مكتبة رائعة ، يرجى القيام بذلك من أجلنا في التعليقات! شكرا لك مقدما!
مساء الخير ، عزيزي القارئ ، أود أن أقدم لكم اليوم مجموعة رائعة من المكونات الإضافية والأمثلة لبناء أنواع مختلفة من الرسوم البيانية والرسوم البيانية. أعتقد أن الجميع سيجدون شيئًا مثيرًا للاهتمام لأنفسهم.
1.jqPlot - ملحق jQuery متعدد الاستخدامات وقابل للتوسيع للتخطيط
jqPlot - البرنامج المساعد JQuery لتخطيط جافا سكريبت.
تنتج jqPlot خطوطًا وأشرطة ومخططات دائرية جميلة مع الكثير من الميزات:
العديد من أنماط المخططات.
بيانات المحور بتنسيق قابل للتخصيص.
ما يصل إلى 9 محاور ص.
قم بتدوير نص المحور.
الحساب التلقائي لخط الاتجاه.
نصائح منبثقة.
سهولة الاستعمال.
2. مكتبة التصور Dygraphs
Dygraphs هي مكتبة مفتوحة المصدر تبني مخططات متسلسلة زمنية تفاعلية وقابلة للتطوير. إنه مصمم لعرض مجموعات بيانات كثيفة ويسمح للمستخدمين باستكشافها وتفسيرها.
الخصائص:
يتم عرض السلاسل الزمنية بدون خوادم خارجية أو فلاش للرسوم المتحركة
يعمل في Internet Explorer (مع excanvas)
حجم صغير (69 كيلوبايت)
يعرض القيم عند التمرير
تحجيم تفاعلي
فترة متوسط قابلة للتعديل
متوافق مع Google Visualization API
http://dygraphs.com/
3. Highcharts - مخططات JavaScript تفاعلية لموقعك على الويب
Highcharts هي مكتبة مخططات JavaScript نقية تقدم مخططات تفاعلية لموقع الويب أو تطبيق الويب الخاص بك. تدعم المخططات العالية حاليًا الخطوط ، والخطوط ، والمساحات ، وخطوط المساحات ، والأعمدة ، والشريط ، والدائرة ، والمبعثر ، ومقاييس الزوايا ، و arearange ، و areaplinerange ، و العمود الفقري ، وأنواع المخططات القطبية.
4. مسج مع تأثير عجلة الماوس التمرير
لا تستخدم صورة متحركة بصيغة PNG أو JPG.
يتعامل مع المستشعر وعجلة الماوس وأحداث لوحة المفاتيح.
http://anthonyterrien.com/knob/
5. مؤشرات CSS3 أنيقة
مؤشرات متحركة وأنيقة باستخدام CSS3.
http://www.red-team-design.com
6. Highcharts مع JQuery
Highcharts هي مكتبة رسوم بيانية متوافقة مع jQuery و Mootools. وهو متوافق مع جميع متصفحات الويب القياسية ويستخدم بيانات JSON لإنشاء رسم بياني. يدعم عدة أنواع من خطوط الرسم البياني ، والخطوط ، والمساحة ، وخط المنطقة ، والأعمدة ، والشريط ، والدائرة ، والمخطط المبعثر.
Highcharts.com
7. رسم بياني متحرك في HTML5 و JQuery
مخطط دائري جميل وتفاعلي باستخدام أحدث تقنيات HTML5. لا تستخدم الفلاش.
8. الرسم البياني التجريبي CSS3
هذه الطريقة هي مثال لبناء مخططات CSS3 تجريبية ، بدون جافا سكريبت وصور. إن استخدام محددات CSS3 مثير للإعجاب حقًا: التحولات والتدرجات والانتقالات قيد الاستخدام. للأسف غير مدعوم في IE.
9. مخطط آخر في JQuery و HTML5
يوزع المكون الإضافي Visualize عناصر المحتوى الرئيسية في جدول HTML منظم ، ويستخدم HTML5 لتحويلها إلى مخطط أو رسم بياني. على سبيل المثال ، في ورقة البيانات ، يمكن أن تكون الصفوف بمثابة مخطط شريطي أو خطي أو إسفين. يتحقق المرئي أيضًا تلقائيًا من القيم القصوى والدنيا في الجدول ويستخدمها لحساب قيم المحور س للخط والمدرج التكراري. أخيرًا ، يشتمل المكون الإضافي على نمطين مختلفين من أنماط CSS ، الفاتح والداكن ، والذي يمكن استخدامه كما هو ، أو يمكن أن يكون بمثابة نقطة بداية لتخصيص المخططات والرسوم البيانية.
- ترجمة
يكاد يكون من المستحيل تخيل لوحة معلومات بدون مخططات ورسوم بيانية. يعرضون الإحصائيات المعقدة بسرعة وكفاءة. علاوة على ذلك ، يعمل الرسم التخطيطي الجيد أيضًا على تحسين التصميم العام لموقعك.
في هذه المقالة ، سأعرض لك بعضًا من أفضل مكتبات JavaScript لإنشاء المخططات / الرسوم البيانية (والجداول المحورية). ستساعدك هذه المكتبات في إنشاء مخططات جميلة وقابلة للتخصيص لمشاريعك المستقبلية.
على الرغم من أن معظم المكتبات مجانية وقابلة لإعادة التوزيع ، إلا أن بعضها يحتوي على إصدارات مدفوعة بوظائف إضافية.
D3.js - وثائق موجهة للبيانات
اليوم ، عندما نفكر في الرسوم البيانية ، فإن أول ما يتبادر إلى الذهن هو D3.js كمشروع مفتوح المصدر ، يوفر D3.js ، بلا شك ، العديد من الميزات المفيدة التي تفتقر إليها معظم المكتبات الحالية. ميزات مثل "Enter and Exit" ، والانتقالات القوية ، والبنية المشابهة لـ jQuery أو Prototype تجعلها واحدة من أفضل مكتبات JavaScript لإنشاء الرسوم البيانية والمخططات. في D3.js ، يتم إنشاؤها باستخدام HTML و SVG و CSS.على عكس العديد من مكتبات JavaScript الأخرى ، لا يأتي D3.js مع مخططات مسبقة الصنع خارج الصندوق. ومع ذلك ، يمكنك إلقاء نظرة على قائمة الرسوم البيانية التي تم إنشاؤها في D3.js للحصول على فكرة عامة.
لا يعمل D3.js كما هو متوقع مع المتصفحات القديمة مثل IE8. ولكن يمكنك دائمًا استخدام المكونات الإضافية مثل المكوِّن الإضافي aight للتوافق عبر المستعرضات.
تم استخدام D3.js على نطاق واسع على مواقع الويب مثل NYTimes و Uber و Weather.com
مخططات جوجل
مخططات Google هي مكتبة جافا سكريبت أستخدمها بانتظام لجعل الرسوم البيانية بسيطة وسهلة. يوفر العديد من المخططات المعدة مسبقًا مثل مخططات شريط التحرير والسرد والمخططات الشريطية ومخططات التقويم والمخططات الدائرية والمخططات الجغرافية والمزيد.
تحتوي مخططات Google أيضًا على الكثير من إعدادات التكوين لمساعدتك على تغيير مظهر الرسم البياني الخاص بك. يتم تقديم الرسومات باستخدام تعدين HTML5 / SVG لضمان التوافق عبر المستعرضات وإمكانية النقل عبر الأنظمة الأساسية على iPhone و iPad و Android. يحتوي أيضًا على VML لدعم إصدارات IE الأقدم.
Highcharts شبيبة
Highcharts JS هي مكتبة رسوم بيانية أخرى مشهورة جدًا. يأتي مع الكثير من الرسوم المتحركة من مختلف الأنواع التي يمكن أن تجذب الكثير من الانتباه إلى موقعك. مثل المكتبات الأخرى ، يحتوي HighchartsJS على العديد من المخططات المعدة مسبقًا: مخطط ، شكل ، تركيبة ، شريط ، شريط ، دائري ، مبعثر ، إلخ.
واحدة من أكبر فوائد استخدام HighchartsJS هي التوافق مع المتصفحات القديمة مثل Internet Explorer 6. تستخدم المتصفحات القياسية SVG لعرض المخططات. في IE القديم ، يتم تقديم الرسومات عبر VML.
على الرغم من أن HighchartsJS مجاني للاستخدام الشخصي ، إلا أنك تحتاج إلى شراء ترخيص للاستخدام التجاري.
Fusioncharts
Fusioncharts هي واحدة من أقدم مكتبات JavaScript وتم إصدارها لأول مرة في عام 2002. يتم إنشاء الرسومات باستخدام HTML5 / SVG و VML لتحسين قابلية النقل والتوافق.
على عكس العديد من المكتبات ، توفر Fusioncharts القدرة على تحليل بيانات JSON و XML. يمكنك أيضًا تصدير هذه الرسومات في 3 تنسيقات مختلفة: PNG و JPG و PDF.
Fusioncharts متوافق جيدًا مع المتصفحات القديمة مثل IE6. ولهذا السبب ، أصبحت واحدة من أكثر المكتبات تفضيلاً في العديد من المنظمات التجارية.
يمكنك استخدام الإصدار المميز بعلامة مائية من Fusioncharts مجانًا لكل من المشروعات الشخصية والتجارية. ومع ذلك ، تحتاج إلى شراء ترخيص للتخلص من العلامة المائية.
فلوت
Flot هي مكتبة JavaScript لـ jQuery تتيح لك إنشاء رسوم بيانية / مخططات. واحدة من أقدم مكتبات الرسوم البيانية وأكثرها شهرة.
يدعم Flot شريطي ومبعثر وشريطي وشريطي وأي مجموعة من هذه الأنواع من المخططات. متوافق أيضًا مع المتصفحات القديمة مثل IE 6 و Firefox 2.
Flot مجاني تمامًا ، يتم توفير الدعم التجاري بناءً على طلب خاص للمطور. فيما يلي قائمة بالأمثلة مع المخططات التي تم إنشاؤها باستخدام Flot.
amCharts
amCharts هي بلا شك واحدة من أجمل مكتبات الرسوم البيانية الموجودة. وهي مقسمة بالكامل إلى 3 أنواع مستقلة: مخططات JavaScript ومخططات الخرائط (amMaps) ومخططات الأسهم.
AmMaps هو المفضل لدي من بين الثلاثة أعلاه. يوفر ميزات مثل الخرائط الحرارية ورسم الخطوط وإضافة نص إلى الخريطة وتحميل الرموز أو الصور أعلى الخريطة والتكبير وغير ذلك.
تستخدم amCharts SVG لعرض المخططات التي تعمل فقط في المتصفحات الحديثة. قد لا يتم عرض الرسوم البيانية بشكل صحيح في IE أدناه الإصدار 9.
مخطط EJS متاح في الإصدارات المجانية والمدفوعة. يحتوي الإصدار المجاني على قيود تمنعك من استخدام أكثر من رسم واحد لكل صفحة وأكثر من تسلسلين (رقمين) لكل رسم. تحقق من تفاصيل التسعير.
uvCharts
uvCharts هي مكتبة JavaScript مفتوحة المصدر بها أكثر من 100 خيار تكوين. لديها رسوم بيانية لـ 12 معيارًا مختلفًا بمجرد إخراجها من الصندوق.
تم إنشاء UvCharts في مكتبة D3.js. يعد هذا المشروع بالتخلص من جميع الفروق الدقيقة المعقدة في ترميز D3.js وتوفير تنفيذ سهل للمخططات القياسية. يتم إنشاء uvCharts باستخدام SVG و HTML و CSS.
استنتاج
الآن اختيار أفضل مكتبة تخطيطية لمشروعاتك المستقبلية متروك لك تمامًا. المطورين الذين يبحثون عن تحكم كامل في مخططاتهم سيختارون بالتأكيد D3.js تتمتع جميع المكتبات المذكورة أعلاه تقريبًا بدعم جيد في منتديات Stackoverflow.آمل أن تكون قد استمتعت بهذا المقال. طاب يومك.
- ترجمة
يكاد يكون من المستحيل تخيل لوحة معلومات بدون مخططات ورسوم بيانية. يعرضون الإحصائيات المعقدة بسرعة وكفاءة. علاوة على ذلك ، يعمل الرسم التخطيطي الجيد أيضًا على تحسين التصميم العام لموقعك.
في هذه المقالة ، سأعرض لك بعضًا من أفضل مكتبات JavaScript لإنشاء المخططات / الرسوم البيانية (والجداول المحورية). ستساعدك هذه المكتبات في إنشاء مخططات جميلة وقابلة للتخصيص لمشاريعك المستقبلية.
على الرغم من أن معظم المكتبات مجانية وقابلة لإعادة التوزيع ، إلا أن بعضها يحتوي على إصدارات مدفوعة بوظائف إضافية.
D3.js - وثائق موجهة للبيانات
اليوم ، عندما نفكر في الرسوم البيانية ، فإن أول ما يتبادر إلى الذهن هو D3.js كمشروع مفتوح المصدر ، يوفر D3.js ، بلا شك ، العديد من الميزات المفيدة التي تفتقر إليها معظم المكتبات الحالية. ميزات مثل "Enter and Exit" ، والانتقالات القوية ، والبنية المشابهة لـ jQuery أو Prototype تجعلها واحدة من أفضل مكتبات JavaScript لإنشاء الرسوم البيانية والمخططات. في D3.js ، يتم إنشاؤها باستخدام HTML و SVG و CSS.على عكس العديد من مكتبات JavaScript الأخرى ، لا يأتي D3.js مع مخططات مسبقة الصنع خارج الصندوق. ومع ذلك ، يمكنك إلقاء نظرة على قائمة الرسوم البيانية التي تم إنشاؤها في D3.js للحصول على فكرة عامة.
لا يعمل D3.js كما هو متوقع مع المتصفحات القديمة مثل IE8. ولكن يمكنك دائمًا استخدام المكونات الإضافية مثل المكوِّن الإضافي aight للتوافق عبر المستعرضات.
تم استخدام D3.js على نطاق واسع على مواقع الويب مثل NYTimes و Uber و Weather.com
مخططات جوجل
مخططات Google هي مكتبة جافا سكريبت أستخدمها بانتظام لجعل الرسوم البيانية بسيطة وسهلة. يوفر العديد من المخططات المعدة مسبقًا مثل مخططات شريط التحرير والسرد والمخططات الشريطية ومخططات التقويم والمخططات الدائرية والمخططات الجغرافية والمزيد.
تحتوي مخططات Google أيضًا على الكثير من إعدادات التكوين لمساعدتك على تغيير مظهر الرسم البياني الخاص بك. يتم تقديم الرسومات باستخدام تعدين HTML5 / SVG لضمان التوافق عبر المستعرضات وإمكانية النقل عبر الأنظمة الأساسية على iPhone و iPad و Android. يحتوي أيضًا على VML لدعم إصدارات IE الأقدم.
Highcharts شبيبة
Highcharts JS هي مكتبة رسوم بيانية أخرى مشهورة جدًا. يأتي مع الكثير من الرسوم المتحركة من مختلف الأنواع التي يمكن أن تجذب الكثير من الانتباه إلى موقعك. مثل المكتبات الأخرى ، يحتوي HighchartsJS على العديد من المخططات المعدة مسبقًا: مخطط ، شكل ، تركيبة ، شريط ، شريط ، دائري ، مبعثر ، إلخ.
واحدة من أكبر فوائد استخدام HighchartsJS هي التوافق مع المتصفحات القديمة مثل Internet Explorer 6. تستخدم المتصفحات القياسية SVG لعرض المخططات. في IE القديم ، يتم تقديم الرسومات عبر VML.
على الرغم من أن HighchartsJS مجاني للاستخدام الشخصي ، إلا أنك تحتاج إلى شراء ترخيص للاستخدام التجاري.
Fusioncharts
Fusioncharts هي واحدة من أقدم مكتبات JavaScript وتم إصدارها لأول مرة في عام 2002. يتم إنشاء الرسومات باستخدام HTML5 / SVG و VML لتحسين قابلية النقل والتوافق.
على عكس العديد من المكتبات ، توفر Fusioncharts القدرة على تحليل بيانات JSON و XML. يمكنك أيضًا تصدير هذه الرسومات في 3 تنسيقات مختلفة: PNG و JPG و PDF.
Fusioncharts متوافق جيدًا مع المتصفحات القديمة مثل IE6. ولهذا السبب ، أصبحت واحدة من أكثر المكتبات تفضيلاً في العديد من المنظمات التجارية.
يمكنك استخدام الإصدار المميز بعلامة مائية من Fusioncharts مجانًا لكل من المشروعات الشخصية والتجارية. ومع ذلك ، تحتاج إلى شراء ترخيص للتخلص من العلامة المائية.
فلوت
Flot هي مكتبة JavaScript لـ jQuery تتيح لك إنشاء رسوم بيانية / مخططات. واحدة من أقدم مكتبات الرسوم البيانية وأكثرها شهرة.
يدعم Flot شريطي ومبعثر وشريطي وشريطي وأي مجموعة من هذه الأنواع من المخططات. متوافق أيضًا مع المتصفحات القديمة مثل IE 6 و Firefox 2.
Flot مجاني تمامًا ، يتم توفير الدعم التجاري بناءً على طلب خاص للمطور. فيما يلي قائمة بالأمثلة مع المخططات التي تم إنشاؤها باستخدام Flot.
amCharts
amCharts هي بلا شك واحدة من أجمل مكتبات الرسوم البيانية الموجودة. وهي مقسمة بالكامل إلى 3 أنواع مستقلة: مخططات JavaScript ومخططات الخرائط (amMaps) ومخططات الأسهم.
AmMaps هو المفضل لدي من بين الثلاثة أعلاه. يوفر ميزات مثل الخرائط الحرارية ورسم الخطوط وإضافة نص إلى الخريطة وتحميل الرموز أو الصور أعلى الخريطة والتكبير وغير ذلك.
تستخدم amCharts SVG لعرض المخططات التي تعمل فقط في المتصفحات الحديثة. قد لا يتم عرض الرسوم البيانية بشكل صحيح في IE أدناه الإصدار 9.
مخطط EJS متاح في الإصدارات المجانية والمدفوعة. يحتوي الإصدار المجاني على قيود تمنعك من استخدام أكثر من رسم واحد لكل صفحة وأكثر من تسلسلين (رقمين) لكل رسم. تحقق من تفاصيل التسعير.
uvCharts
uvCharts هي مكتبة JavaScript مفتوحة المصدر بها أكثر من 100 خيار تكوين. لديها رسوم بيانية لـ 12 معيارًا مختلفًا بمجرد إخراجها من الصندوق.
تم إنشاء UvCharts في مكتبة D3.js. يعد هذا المشروع بالتخلص من جميع الفروق الدقيقة المعقدة في ترميز D3.js وتوفير تنفيذ سهل للمخططات القياسية. يتم إنشاء uvCharts باستخدام SVG و HTML و CSS.
استنتاج
الآن اختيار أفضل مكتبة تخطيطية لمشروعاتك المستقبلية متروك لك تمامًا. المطورين الذين يبحثون عن تحكم كامل في مخططاتهم سيختارون بالتأكيد D3.js تتمتع جميع المكتبات المذكورة أعلاه تقريبًا بدعم جيد في منتديات Stackoverflow.آمل أن تكون قد استمتعت بهذا المقال. طاب يومك.
العلامات: إضافة العلامات
إذا كان موقعك كثيف البيانات وتحتاج إلى تصور تلك البيانات بسهولة ، عادةً باستخدام مكتبة مخططات JavaScript. ومع ذلك ، هناك العشرات من هذه المكتبات ، ولكل منها قدرات مختلفة قليلاً.
في هذه المقالة ، سنتعرف على AnyChart مع 10 أمثلة أنيقة وسهلة الاستخدام. يعد AnyChart رائعًا لاحتياجات تصور البيانات الخاصة بك والسهولة التي يمكنه بها معالجة البيانات بأي تنسيق تقريبًا.
لماذا AnyChart
AnyChart هي مكتبة تجارية وهي مجانية لأي استخدام غير تجاري. لقد أثبتت نفسها جيدًا وهي موجودة في السوق لأكثر من 10 سنوات. تم استخدام AnyChart المستند إلى Flash في البداية ، ولكن تم التبديل لاحقًا إلى JavaScript خالص مع عرض SVG / VML.
تتميز واجهة برمجة تطبيقات AnyChart بأنها مرنة للغاية وتسمح لك بتعديل أي جانب من جوانب الرسم البياني تقريبًا أثناء التشغيل.
AnyChart - مجموعة المنتجات
- اني تشارت- مصمم لإنشاء مخططات تفاعلية من جميع الأنواع الأساسية
- اني ستوك- مصمم لتصور مجموعات البيانات الكبيرة بناءً على التاريخ / الوقت
- اني ماب- لخرائط الجغرافيا والأماكن
- اني جانت- لحلول إدارة المشاريع والموارد (مخططات جانت ، الموارد ، مخططات بيرت)
ومع ذلك ، يمكن اعتبار هذه المكتبات مكتبة تخطيطية كبيرة لجافا سكريبت (HTML5). لديهم جميعًا نفس واجهة برمجة التطبيقات ، ويتم تكوين جميع الرسوم البيانية بشكل متماثل تقريبًا ، ولديهم سمات وإعدادات وطرق تحميل بيانات مشتركة.
بدء التشغيل السريع مع AnyChart
لبدء استخدام AnyChart على صفحة HTML الخاصة بك ، ما عليك سوى القيام بثلاثة أشياء بسيطة. يتضمن الأول والثاني الارتباط بملف مكتبة JavaScript وتوفير عنصر HTML على مستوى الكتلة.
إليك نموذج HTML يمكنك استخدامه:
والثالث هو إضافة كود JavaScript الذي يقوم بإنشاء مخطط عمودي تفاعلي بسيط من سلسلة مفردة:
Anychart.onDocumentLoad (function () (// إنشاء مخطط وتعيين بيانات var chart = anychart.column ([["Winter"، 2]، ["Spring"، 7]، ["Summer"، 6]، ["Fall "، 10]])؛ // تعيين عنوان المخطط chart.title (" نموذج AnyChart الأساسي ") ؛ // تعيين حاوية المخطط ورسم مخطط حاوية (" حاوية "). Draw ()؛))؛
وهذا كل شيء! هذا ما حصلنا عليه.
الحق سهلة؟ لكن كل شيء يصبح أسهل وأكثر مرونة في AnyChart عندما يتعلق الأمر بإعداد البيانات. دعنا ننتقل إلى القسم التالي لإلقاء نظرة فاحصة على هذا.
الحصول على البيانات في AnyChart
تتمثل إحدى الميزات التي يقوم بها AnyChart في قدرته على العمل مع البيانات في مجموعة متنوعة من التنسيقات. أي واحد تختاره سيعتمد في النهاية على المهمة المطروحة (وإلى حد ما تفضيلاتك الشخصية) ، لكن نهج AnyChart المرن يجعله مناسبًا جدًا لأي مشروع تقريبًا.
البيانات من المصفوفة
في الواقع ، لقد رأيت بالفعل الطريقة الأولى في قسم "Quick Start with AnyChart" أعلاه. باستخدام هذه الطريقة ، تقوم بتعريف بياناتك كمصفوفة من المصفوفات ويقوم برنامج AnyChart بالباقي. هذه الطريقة موجزة وسهلة التنسيق والاستخدام.
Anychart.onDocumentLoad (function () (// إنشاء مخطط وتعيين البيانات // مثل Array of Arrays var chart = anychart.pie ([["Peter"، 5]، ["John"، 7]، ["James"، 9]، ["Jacob"، 12]])؛ chart.title ("AnyChart: Array of Arrays")؛ chart.container ("حاوية"). Draw ()؛))؛
صفيف من الأشياء
الطريقة الثانية مشابهة جدًا للطريقة الأولى - تعيين البيانات كمصفوفة من الكائنات. في الواقع ، إنه أقل إحكاما ، ولكن لا يزال من السهل تنسيقه وقراءته وفهمه. بالإضافة إلى ذلك ، يسمح لك هذا التنسيق بتخصيص نقاط فردية من بياناتك ، والتي يمكن أيضًا معالجتها بطرق أخرى ، ولكن فقط باستخدام تعيينات إضافية.
ملحوظة: عند استخدام البيانات في كائنات في موقف مثل هذا ، استخدم الأسماء المناسبة لحقول القيمة والوسيطة. يمكنك العثور على هذا الأمر في وثائق AnyChart الخاصة بكل نوع مخطط. في معظم الحالات ، تكون الوسيطة هي x ، وعادة ما يتم وضع القيمة في حقل القيمة.
Anychart.onDocumentLoad (function () (// إنشاء مخطط وتعيين البيانات // كمصفوفة كائنات // يتم تمييز أكبر نقطة بعلامة متحدبة بشكل فردي var chart = anychart.line ([(x: "Winter" ، القيمة: 5 )، (x: "Spring"، value: 9، marker: (enabled: true، type: "star5"، fill: "Gold"))، (x: "Summer"، value: 7)، (x: " Fall "، القيمة: 1)]) ؛ chart.title (" AnyChart: Array of Objects ") ؛ chart.container (" حاوية "). Draw () ؛)) ؛
إنشاء مخططات متسلسلة متعددة
المخططات متعددة السلاسل عبارة عن مخططات تسمح لك بعرض الارتفاعات والانخفاضات في مجموعات البيانات المتعددة ومقارنتها. عند إنشاء مخططات متسلسلة متعددة باستخدام AnyChart ، يمكنك استخدام الطرق المقدمة مسبقًا ، ولكن بالإضافة إلى تحديد أسماء السلاسل الخاصة بك. سيتولى محرك AnyChart الباقي.
Anychart.onDocumentLoad (function () (// إنشاء مخطط وتعيين البيانات // مثل Array of Arrays var chart = anychart.line () chart.data ((header: ["#"، "Euro (€)"، "USD ($) "،" Pound (£) "] ، الصفوف: [[" Winter "، 5، 7، 4]، [" Spring "، 7، 9، 6]، [" Summer "، 9، 12، 8 ] ، ["Fall" ، 12 ، 15 ، 9])) ؛ chart.title ("AnyChart: مصفوفة متعددة السلاسل من المصفوفات") ؛ chart.legend (صواب) ؛ chart.container ("حاوية"). ارسم () ؛)) ؛
صفوف متعددة: صفيف كائنات
الآن دعنا نرى كيف يمكنك إنشاء مخطط متعدد السلاسل باستخدام مصفوفة من الكائنات.
ملحوظة... عند استخدام هذه الكائنات ، يمكنك استخدام أي أسماء حقول للقيم.
إليك كيف يمكنك القيام بذلك:
Anychart.onDocumentLoad (function () (// إنشاء مخطط وتعيين البيانات // مثل Array of Objects var chart = anychart.column ()؛ chart.data ((header: ["#"، "Euro (€)"، " USD ($) "،" Pound (£) "] ، الصفوف: [(x:" Winter "، usd: 5، eur: 4، pound: 3)، (x:" Spring "، usd: 3، eur: 3 ، جنيه: 3) ، (x: "Summer" ، usd: 2 ، eur: 5 ، pound: 3) ، (x: "Fall" ، usd: 4 ، eur: 2 ، pound: 3)])) ؛ chart.title ("صفيف الكائنات") ؛ chart.legend (صحيح) ؛ chart.container ("حاوية"). draw () ؛)) ؛
عرض البيانات من جدول HTML
هناك طريقة أخرى لتحميل البيانات في AnyChart وهي استخدام جدول موجود بالفعل على الصفحة. يمكن أن تكون هذه طريقة فعالة للغاية لتصور النقاط الرئيسية لقائمة أرقام مملة أخرى. لإنجاز هذا العمل ، ستحتاج إلى إضافة البرنامج النصي لمحول البيانات مع مكتبة الرسوم البيانية.
ثم هناك خياران ، يمكنك استرداد البيانات من الجداول التي تم إنشاؤها باستخدام العلامة