دليل شامل: كيفية دمج مكتبة ApexCharts مع إطار عمل Vue.js

تُعد الرسوم البيانية والمخططات أداة قوية وفعالة لعرض المعلومات والبيانات لمستخدمي تطبيقاتك. فهي لا تقتصر على تقديم الأرقام فحسب، بل تحولها إلى قصص مرئية سهلة الفهم والتحليل. في هذا المقال، سنستعرض بالتفصيل كيفية دمج مكتبة ApexCharts الحديثة مع إطار عمل Vue.js، وذلك باستخدام المكون المخصص vue-apexcharts، لتمكينك من بناء تصورات بيانات تفاعلية وجذابة في تطبيقات الويب الخاصة بك.

الشروع في العمل: إعداد بيئة Vue.js

للبدء، سنقوم بإنشاء تطبيق Vue.js أساسي باستخدام واجهة سطر الأوامر الخاصة بـ Vue CLI. إذا لم تكن قد قمت بتثبيت Vue CLI مسبقًا، يمكنك القيام بذلك عبر الأمر التالي. يُرجى ملاحظة أنك ستحتاج إلى تثبيت Node.js الإصدار 8 أو أعلى (يُوصى بالإصدار 8.10.0+) لاستخدام CLI.

npm install -g @vue/cli

بعد تثبيت Vue CLI، يمكننا الآن إنشاء مشروعنا الجديد. استخدم الأمر التالي لإنشاء مشروع باسم vue-apexcharts-demo:

vue create vue-apexcharts-demo

ستُطالب بعد ذلك باختيار إعداد مسبق افتراضي أو تحديد الميزات يدويًا. اختر الخيار default. سيتم إنشاء دليل مشروع جديد، ويمكنك الانتقال إليه باستخدام الأمر التالي:

cd vue-apexcharts-demo

تثبيت مكتبة ApexCharts

قبل المتابعة، قد تتساءل: ما هي ApexCharts؟ إنها مكتبة رسوم بيانية حديثة تساعد المطورين على إنشاء تصورات بيانات جميلة وتفاعلية لصفحات الويب. يمكنك استعراض عروضها التوضيحية لترى إمكانياتها. لدمج ApexCharts مع تطبيق Vue.js الخاص بنا، سنستخدم المكون المخصص vue-apexcharts الذي يعمل كغلاف لهذه المكتبة.

لتثبيت كل من ApexCharts ومكون vue-apexcharts في تطبيقنا، استخدم الأوامر التالية في طرفية المشروع:

npm install --save apexcharts
npm install --save vue-apexcharts

تهيئة مكون vue-apexcharts

بعد تثبيت vue-apexcharts، نحتاج إلى تهيئته داخل تطبيقنا ليصبح متاحًا للاستخدام. افتح دليل src وقم بإنشاء دليل فرعي جديد باسم plugins. داخل هذا الدليل الجديد، أنشئ ملفًا باسم apexcharts.js.

في ملف apexcharts.js، سنقوم بإنشاء مكون Vue عام لـ apexcharts. هذا سيجعل المكون متاحًا عالميًا في جميع أنحاء تطبيقنا دون الحاجة إلى استيراده في كل ملف. لتحقيق ذلك، سنقوم باستيراد كل من Vue و VueApexCharts، ثم نسجل مكونًا عامًا باسم apexchart. يجب أن يبدو محتوى ملف apexcharts.js كما يلي:

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)

استيراد ملف المكون الإضافي

الآن بعد أن أنشأنا ملف المكون الإضافي، يجب أن نجعل Vue على دراية به. للقيام بذلك، سنقوم باستيراده في ملف main.js الرئيسي للتطبيق. افتح ملف main.js وأضف السطر التالي بعد آخر عبارة استيراد موجودة:

import '@/plugins/apexcharts'

بهذه الخطوات، أصبحنا جاهزين لإنشاء أول رسم بياني لنا.

إنشاء أول رسم بياني

سنقوم بإنشاء رسومنا البيانية داخل مكون HelloWorld، الذي تم إنشاؤه تلقائيًا عند استخدام Vue CLI لإنشاء تطبيقنا. افتح ملف HelloWorld.vue واحذف جميع الأكواد التجريبية الموجودة فيه. يجب أن يبدو ملفك بعد الحذف كما يلي:

<template>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

تذكر أننا أطلقنا على مكوننا اسم apexchart في ملف المكون الإضافي. يقوم vue-apexcharts ببناء الرسوم البيانية باستخدام البيانات التي تمررها إليه عبر الخصائص (props). سنستخدم هذه الآلية لإنشاء ترميز HTML لأول رسم بياني لدينا. في هذا المثال الأول، سنبدأ برسم بياني شريطي (bar chart) بسيط جدًا. أضف الكود التالي داخل قسم <template>:

<template>
  <div>
    <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
  </div>
</template>

كما ترى في القالب أعلاه، يستقبل مكون apexchart أربع خصائص أساسية: width لتحديد العرض، type لتحديد نوع الرسم البياني (هنا bar)، و :options و :series لتمرير إعدادات الرسم البياني والبيانات على التوالي. الآن، لننتقل إلى الجزء الخاص بالـ <script> لإضافة البيانات والإعدادات:

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    options: {
      chart: {
        id: 'vuechart-example'
      },
      xaxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      }
    },
    series: [{
      name: 'series-1',
      data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
    }]
  })
}
</script>

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

يحتوي الرسم البياني الشريطي الخاص بنا على أسعار الأسهم الشهرية لمنظمة وهمية. لدينا 12 نقطة بيانات في الرسم البياني، حيث يمثل كل شهر على المحور السيني (x-axis) نقطة بيانات، وتُعرض أسعارها المقابلة على المحور الصادي (y-axis). لتوفير البيانات التي سيتم عرضها، أضفنا مصفوفة series. الـ series هي مصفوفة من الكائنات، حيث يحدد كل كائن نوع الرسم البياني المراد إنشاؤه ويحتوي على مصفوفة data للقيم التي سيتم رسمها على الرسم البياني.

يمكنك الآن تشغيل خادم التطوير الخاص بك باستخدام الأمر التالي:

npm run serve

افتح متصفحك على العنوان localhost:8080، ويجب أن تشاهد الرسم البياني الخاص بك:

تنسيق الرسوم البيانية

لتحسين مظهر الرسم البياني، يمكننا وضعه في منتصف الصفحة وزيادة عرضه. سنضيف فئة chart-wrapper إلى العنصر <div> الذي يحيط بالرسم البياني، وسنزيد عرض الرسم البياني إلى 800px. سيبدو قالب <template> الآن كما يلي:

<template>
  <div class="chart-wrapper">
    <apexchart width="800" type="bar" :options="options" :series="series"></apexchart>
  </div>
</template>

بعد ذلك، لنضف بعض التنسيقات إلى الفئة الجديدة chart-wrapper لمركزة الرسم البياني في الصفحة. أضف التنسيقات التالية داخل قسم <style scoped> في ملف HelloWorld.vue:

<style scoped>
div.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

بينما نضيف التنسيقات، دعنا نستبدل شعار Vue الافتراضي في ملف App.vue بعنوان بسيط. افتح ملف App.vue، واحذف وسم الشعار، واستبدله بالآتي:

<h1>Vue Apexcharts Demo</h1>

الآن، سيبدو الرسم البياني الخاص بنا بهذا الشكل بعد التحديثات:

إضافة عنوان وتغيير لون الرسم البياني

يمكننا إضافة عنوان إلى الرسم البياني الشريطي لإضافة سياق إضافي وشرح لما يدور حوله الرسم البياني. للقيام بذلك، عد إلى مكون HelloWorld.vue وأضف خاصية title إلى الكائن options:

options: {
  chart: {
    id: 'vuechart-example'
  },
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  title: {
    text: 'Monthly Stock Pricing'
  }
},
series: [{
  name: 'series-1',
  data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
}]

افتراضيًا، يتم وضع العنوان على الجانب الأيسر من الرسم البياني الشريطي. إليك كيف سيبدو الرسم البياني الآن:

دعنا نغير هذا السلوك الافتراضي عن طريق إضافة تنسيقنا المخصص. نريد أن يكون للعنوان حجم خط أكبر وأن يكون في المنتصف. يحتوي كائن title على خاصية تسمى align تمثل المحور الأفقي، وسنجعلها center. لجعل العنوان بحجم خط أكبر، نحتاج إلى إضافة خيار style. بالإضافة إلى ذلك، يمكننا تعيين لون مختلف للرسم البياني الشريطي باستخدام خاصية colors. إليك كيف سيبدو الكائن options الآن:

options: {
  chart: {
    id: 'vuechart-example'
  },
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  title: {
    text: 'Monthly Stock Pricing',
    align: 'center',
    style: {
      fontSize: '20px',
    },
  },
  colors: ['#00897b']
},
series: [{
  name: 'series-1',
  data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
}]

هذا هو الشكل النهائي للرسم البياني الشريطي بعد تطبيق التنسيقات الجديدة:

إنشاء رسم بياني خطي

لإنشاء رسم بياني خطي، نحتاج أولاً إلى إضافة عنصر <div> جديد من الفئة chart-wrapper وعنصر apexchart جديد. سيحتوي عنصر apexchart الجديد على نفس الخصائص تقريبًا كما في المثال السابق، ولكن الشيء المثير للاهتمام هنا هو أن كل ما عليك فعله هو تغيير خاصية type في القالب إلى line. إليك كيف سيبدو كود HTML الخاص بك الآن في ملف HelloWorld.vue:

<template>
  <div>
    <div class="chart-wrapper">
      <apexchart width="800" type="bar" :options="options" :series="series"></apexchart>
    </div>
    <hr>
    <div class="chart-wrapper">
      <apexchart width="800" type="line" :options="options" :series="series"></apexchart>
    </div>
  </div>
</template>

الآن، أصبح لدينا الرسم البياني الخطي الجديد يظهر أسفل الرسم البياني الشريطي:

وثائق ApexCharts ومستودع الكود

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

يمكنك العثور على الكود الكامل لهذا المقال في حسابي على GitHub، مما يتيح لك مراجعة الكود وتجربته بنفسك.

الخلاصة

تُعد الرسوم البيانية أداة لا غنى عنها لتصور البيانات ومساعدة المستخدمين على فهمها والتفاعل معها بفعالية. كما رأينا في هذا الدليل، فإن دمج مكتبة ApexCharts في تطبيق Vue.js الخاص بك هو عملية سهلة ومباشرة، وتوفر لك القدرة على إنشاء تصورات بيانات غنية وتفاعلية تعزز تجربة المستخدم بشكل كبير. لا تتردد في تقديم ملاحظاتك ومشاركة هذا المقال إذا وجدته مفيدًا. شكرًا لقراءتك!

الخلاصة التقنية

يُبرز هذا الدليل ببراعة كيف يمكن لمكتبات تصور البيانات مثل ApexCharts أن ترفع من مستوى تفاعلية وجمالية تطبيقات الويب المبنية باستخدام Vue.js. إن سهولة الدمج عبر مكون vue-apexcharts، بالإضافة إلى المرونة في تخصيص الرسوم البيانية من خلال خصائص options و series، تجعلها خيارًا ممتازًا للمطورين. القدرة على التبديل بين أنواع الرسوم البيانية بمجرد تغيير خاصية type هي ميزة قوية تعكس التصميم المعياري للمكتبة. هذا التكامل لا يوفر فقط عرضًا بصريًا للبيانات، بل يمكن أن يكون حجر الزاوية في بناء لوحات تحكم (dashboards) تحليلية غنية بالمعلومات، مما يعزز من قيمة التطبيق للمستخدم النهائي.