برنامج تعليمي حول FusionCharts للتنقيب في jQuery

نشرت: 2022-03-11

تصوّر البيانات يجعل قراءتها أسهل

عند التعامل مع تحليل البيانات ، تعتمد معظم الشركات على MS Excel أو Google Sheets. على الرغم من أن هذه أدوات قوية ، إلا أنه من الصعب ملاحظة الاتجاهات ، وليس من المنطقي استخدام صفوف كبيرة من بيانات جداول البيانات. التعامل مع البيانات المقدمة بهذه الطريقة ليس مثيرًا للاهتمام ، ولكن بمجرد إضافة التصور إلى تلك البيانات ، تصبح الأمور أسهل في الإدارة ، وهذا هو موضوع البرنامج التعليمي اليوم - إنشاء مخططات تفاعلية باستخدام jQuery.

التعامل مع بيانات جداول البيانات أمر ممل.

من الصعب ملاحظة الاتجاهات من صفوف بيانات جدول البيانات ، ولكن بمجرد إضافة التصور ...

سقسقة

سأستخدم مكتبة مخططات JavaScript الخاصة بـ FusionCharts لهذا المشروع لأنها توفر مكتبة كبيرة تضم أكثر من 90 مخططًا ، ومتوافقة مع كل متصفح ، ومن السهل جدًا التعامل معها. كما أنه يوفر مكونًا إضافيًا مخصصًا لـ jQuery والذي سيجعل مهمتنا أسهل.

سأبدأ بإنشاء مخطط أساسي باستخدام مكتبة JavaScript الأساسية في FusionCharts والمكوِّن الإضافي لمخططات jQuery ، ثم سأضيف إمكانية التنقل إليه. يتيح لك التنقل لأسفل الانتقال من مخطط إلى آخر بالنقر فوق مخطط البيانات.

مصطلح "مؤامرة البيانات" سياق ؛ يشير إلى عمود في مخطط عمودي ، وخطوط في مخطط خطي ، وشرائح دائرية في مخطط دائري. من خلال النقر على مخطط البيانات من الرسم البياني الأصل ، يتم تقديمك مع مخطط فرعي ، يعرض البيانات النسبية بمستوى واحد أعمق.

سيؤدي النقر فوق مخطط بيانات على الرسم البياني الأصل إلى إظهار مخطط فرعي.

فهم FusionCharts

قبل أن نبدأ البرنامج التعليمي ، دعنا نغطي التشريح الأساسي لـ FusionCharts. يتكون كل مخطط من هذه العناصر الأساسية:

التسمية التوضيحية: العنوان على الرسم البياني. يشرح ما يتم رسمه.
التسمية التوضيحية: النص الموجود أسفل التسمية التوضيحية الذي يحدد معلومات المخطط الإضافية ، في كثير من الأحيان يشير إلى إطار زمني تم جمع البيانات منه.
وسيلة إيضاح: يعرض هذا رمزًا لكل مخطط بيانات على الرسم البياني. يمكن تمكين أو تعطيل قطعة أرض معينة من خلال النقر على أيقونة وسيلة الإيضاح الخاصة بها.
مخطط البيانات: هذه هي تمثيلات البيانات على الرسم البياني. يمكن أن يكون مخطط البيانات عمودًا في مخطط عمودي أو خطوطًا في مخطط خطي أو شرائح دائرية في مخطط دائري.
تلميح الأدوات: النص الذي يظهر عند تحريك الماوس فوق مخطط البيانات ، ويستخدم لنقل معلومات إضافية حول مخطط البيانات المحدد.

عمل مخطط تفصيلي

قبل أن نبدأ ، إليك لقطة شاشة للرسم البياني الذي سنقوم بإنشائه في هذا البرنامج التعليمي. يمكنك رؤية JSFiddle هنا أو الوصول إلى كود المصدر الكامل للمشروع على GitHub repo.

معاينة لمشروع jquery النهائي لهذا البرنامج التعليمي.

لقد قسمت عملية إنشاء مخطط تفصيلي إلى خمس خطوات ، فلنبدأ.

الخطوة 1: تضمين ملفات JavaScript وإنشاء حاوية المخطط

أولاً ، نحتاج إلى تضمين جميع ملفات JS التي يعتمد عليها مشروعنا باستخدام علامة <script> . إذا لم تكن الصفحة موجودة بالفعل ، فالرجاء إنشاء مستند HTML فارغ وتضمين الملفات أدناه في قسم <head> . نحتاج الآن إلى الملفات الأربعة التالية:

مصغر jQuery
مكتبة JS الرئيسية في FusionCharts (تشمل كلا من fusioncharts.js و fusioncharts.charts.js )
المكون الإضافي jQuery من FusionCharts

سيبدو قسم <head> الآن كما يلي:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

الآن وقد تم تضمين جميع التبعيات ، فقد حان الوقت لإنشاء الحاوية <div> للمخطط وتضمينها في صفحتنا باستخدام كود HTML التالي:

 <div>drill-down chart will load here</div>

الآن ، يمكننا تحديده باستخدام محدد jQuery's $ داخل الكود:

 $("#drill-down-chart")

ملاحظة: إذا كان لديك أكثر من مخطط واحد في صفحتك ، فستحتاج إلى حاوية منفصلة لكل مخطط id فريد.

الخطوة الثانية: الحصول على البيانات وهيكلتها

تقبل FusionCharts البيانات بتنسيقات JSON و XML ، لكنني اخترت استخدام JSON لأنها أصبحت التنسيق القياسي لتبادل البيانات عبر تطبيقات الويب. تحتوي مصفوفة بيانات JSON للمخطط الأساسي على كائن لكل مخطط بيانات ، وداخل كل كائن مخطط بيانات نحدد التسمية والقيمة الخاصة به. هذا الهيكل يشبه:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

بينما نرسم مخطط التنقيب ، يصبح JSON أكثر تعقيدًا. يتطلب الارتباط بين المخططات الرئيسية والفرعية زوجًا آخر من key value داخل كل كائن من مصفوفة البيانات. سيحتوي المفتاح الجديد (المسمى link ) على معرف المخطط الفرعي الذي ستحصل عليه عند النقر فوق مخطط البيانات الأصل. تنسيق تعريف id المخطط الفرعي هو newchart-dataFormat-childId . نظرًا لأننا نستخدم JSON ، فإننا نعلم أن كل ما نربطه سيبدو مثل newchart-json-childId . إليك كيفية تحديده لمخططنا:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

الخطوة 3: إدخال بيانات الرسم البياني

بمجرد أن تكون البيانات جاهزة ، حان الوقت لإدراج الرسم البياني في صفحتك باستخدام طريقة insertFusionCharts التي يوفرها المكون الإضافي jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

دعنا نفصل مقتطف الشفرة أعلاه:

type يحدد نوع الرسم البياني الأصل الذي نرسمه. في هذه الحالة ، column2d . كل مخطط في مكتبة FusionCharts له اسم مستعار فريد. يمكنك العثور على الاسم المستعار للرسم البياني الذي تريد رسمه في صفحة قائمة الرسوم البيانية في FusionCharts.
يعيّن id المعرّف الفريد للرسم البياني ، حتى لا يتم الخلط بينه وبين معرف عنصر <div> الذي يحتوي على مخططنا. يتم استخدام id المخطط لتحديد مخطط لتطبيق معالجات الأحداث وطرق الاستدعاء. سوف نستفيد من هذا في الخطوة 5.
يحدد width height أبعاد المخطط بالبكسل أو النسبة المئوية. عرض 100٪ يخبر المخطط باحتلال عرض الحاوية الكامل.
نحدد تنسيق البيانات باستخدام dataFormat تنسيق البيانات. نحن نستخدم JSON على سبيل المثال لدينا ولكن هناك تنسيقات بيانات أخرى مقبولة أيضًا ، مثل عنوان URL بتنسيق XML. لمعرفة المزيد حول تنسيقات البيانات ، راجع صفحة التوثيق الرسمية لـ FusionCharts.
يحتوي dataSource على المحتوى الفعلي للمخطط ، ويحتوي كائن chart بداخله على خيارات تكوين المخطط ، مثل التسمية التوضيحية والتسمية التوضيحية الفرعية. يجب أن تبدو مصفوفة data مألوفة نظرًا لأننا قمنا بها في الخطوة 2 (تحتوي على البيانات المراد رسمها) ، وتحتوي linkedData على محتوى المخطط الفرعي (المخطط الذي تحصل عليه بعد النقر فوق مخطط البيانات في المخطط الأصلي).

الموضوعات ذات الصلة: وظف أفضل 3٪ من مهندسي البيانات الضخمة المستقلين.

الخطوة 4: إنشاء مصفوفة البيانات المرتبطة للمخططات الفرعية

الآن وقد حددنا المخطط الأصلي ، فقد حان الوقت لإنشاء مخطط فرعي لكل مخطط بيانات ، وهي عملية مشابهة جدًا لإنشاء المخطط الأصلي. linkedData المصفوفة المرتبطة ، التي تم إنشاؤها في طريقة "insertFusionCharts" ، كائنًا منفصلاً لكل مخطط فرعي. إليك ما تبدو عليه بيانات أول مخطط فرعي:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id هو معرّف المخطط الفرعي الفردي الذي linkedChart في الخطوة 2. يشبه الرسم البياني dataSource من الخطوة 3 من حيث أنه يحتوي على المحتوى الفعلي لذلك المخطط. هناك العديد من السمات الأخرى التي تدخل داخل كائن المخطط ، والتي أغطيها بالتفصيل في القسم التالي ، "تحسين التصميم بسمات المخطط".

الخطوة 5: تكوين مخصص للتنقيب

أنواع الرسوم البيانية المتنوعة

حتى الآن ، يشتمل نموذج الكود الخاص بنا على كل من المخططات الرئيسية والفرعية تشترك في نفس نوع المخطط. إذا كنت تريد التنقل لأسفل إلى نوع مخطط مختلف (من عمود إلى مخطط دائري ، على سبيل المثال) ، يمكنك القيام بذلك عن طريق ربط حدث fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

في الكود أعلاه ، سوف يستدعي حدث fusionchartsrendered طريقة configureLink الرابط ، والتي تحدد نوع جميع المخططات الفرعية بالإضافة إلى أي خيارات زر تراكب. يمكنك أيضًا تحديد أنواع مخططات منفصلة لكل مخطط فرعي. هناك الكثير من الخيارات المتاحة في طريقة configureLink ، لذلك قد تجد أنه من المفيد مراجعة وثائقها المرجعية لواجهة برمجة التطبيقات من FusionCharts.

عرض المخططات في أقسام مختلفة

شيء رائع آخر يمكنك القيام به هو عرض المخطط الفرعي في حاوية مختلفة بدلاً من نفس الحاوية الأصلية. لهذا ، حدد حاوية <div> HTML منفصلة بعد حاوية الرسم البياني الرئيسية renderAt إلى سمة العرض renderAt كما هو موضح أدناه:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

تحدد القيمة المعطاة للسمة renderAt معرّف <div> الذي سيعرض فيه المخطط الفرعي ( chart-container2 ).

تحسين التصميم بسمات الرسم البياني

بعد هذا البرنامج التعليمي ستحصل على مخطط وظيفي ، لكنه سيكون قبيحًا إلى حد ما إذا تركته عند هذا الحد. للحصول على عرض تقديمي أكثر جاذبية ، ستحتاج إلى الاستفادة من "سمات الرسم البياني" التجميلية. يتم تحديد سمات المخطط داخل كائن chart ويتم استخدامها لتخصيص خيارات العرض. قد تجد أنه من المفيد الرجوع إلى الرسم التوضيحي في FusionCharts عند مراجعة السمات الرئيسية القابلة للتكوين:

يحدد paletteColors لون مخططات البيانات. إذا أعطيت لونًا واحدًا هنا ، فستكون جميع الأعمدة بهذا اللون. إذا أعطيت ألوانًا متعددة ، فسيأخذ العمود الأول القيمة الأولى ، وسيأخذ العمود الثاني القيمة الثانية ، وهكذا.
plotSpacePercent يتحكم في المسافة بين الأعمدة. القيمة الافتراضية لهذا هي 20 (القيمة هي int ، لكن الوحدة هي نسبة) والنطاق المسموح به هو 0-80. قيمة الصفر تجعل الأعمدة تتجمع وتلتصق ببعضها البعض.
يحدد baseFont عائلة الخطوط في الرسم البياني. يمكنك استخدام أي خط تريده ؛ لقد استخدمت Google's Open Sans في الرسم البياني الخاص بي. ما عليك سوى تضمين ملف الخط الخارجي في صفحة HTML الخاصة بك لاستخدامه في الرسم البياني الخاص بك.
يتيح لك plotToolText تخصيص تلميحات الأدوات. باستخدام وحدات الماكرو مثل $label و * $dataValue ، يمكنك إظهار معلومات محددة عن مخطط بيانات معين من داخل <div> ، ثم نمط <div> باستخدام CSS مضمنة. هذا ما فعلته في مثالنا:

 "plotToolText": "<div>$label: $dataValue</div>"

يتيح لك theme تحديد سمات الرسم البياني في ملف مختلف وتطبيقها مرة واحدة هنا بدلاً من ازدحام كائن المخطط بالعديد من سمات المخطط. يمكنك العثور على ملف السمة لهذا البرنامج التعليمي - toptal.js - داخل مجلد JS في مستودع GitHub الخاص بالمشروع.

هذا كل ما سأقوم بتغطيته ، ولكن هناك أكثر من مائة سمة للمخطط ، لذلك إذا كنت ترغب في المزيد من الاستكشاف ، يرجى زيارة صفحة سمات مخطط FusionCharts والبحث عن نوع الرسم البياني الخاص بك.