إنشاء رسوم بيانية بار بتقنية Vue.js و HTML5 Canvas (2023)

مقدمة

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

الشروط الأولية

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

الخطوة 1 - إعداد المشروع

يمكنك بدء هذا المشروع باستخدام @vue/cli عبر الأمر التالي:

npx @vue/cli create vue-canvas-example --default

ثم قم بالانتقال إلى دليل المشروع الجديد:

cd vue-canvas-example

بعد ذلك، قم بتعديل محتوى ملف App.vue بحيث يكون كالتالي:

<!-- Code snippet for App.vue -->
<template>
  <div id="app">
    <h2>مثال على رسم بياني بالأعمدة</h2>
    <!-- ... الباقي من الكود ... -->
  </div>
</template>

<script>
import MyCanvas from './components/MyCanvas.vue';
import MyBox from './components/MyBox.vue';

export default {
  name: 'app',
  components: {
    MyCanvas,
    MyBox,
  },
  data() {
    // ... الباقي من الكود ...
  },
  mounted() {
    // ... الباقي من الكود ...
  },
};
</script>

<style>
/* ستايلات الباقي من الكود */
</style>

الخطوة 2 - إنشاء مكون القماش

يقوم مكون القماش بإنشاء عنصر قماش ويحقق توصيل سياق الرسم بالقماش إلى جميع مكوناته الفرعية بواسطة مزود رد الفعل.

<!-- Code snippet for MyCanvas.vue -->
<template>
  <div class="my-canvas-wrapper">
    <canvas ref="my-canvas"></canvas>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provider: {
        context: null,
      },
    };
  },
  provide() {
    return {
      provider: this.provider,
    };
  },
  mounted() {
    // ... الباقي من الكود ...
  },
};
</script>

الخطوة 3 - إنشاء مكون الصندوق

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

<!-- Code snippet for MyBox.vue -->
<script>
// ... الباقي من الكود ...
</script>

قم بحفظ التغييرات وتشغيل التطبيق:

npm run serve

افتح التطبيق في المتصفح:

هذا هو رسم بياني على قماش HTML5 باستخدام نظام الاستجابة في Vue.

الختام

في هذا المقال، قمت بإنشاء مجموعة من المكونات لرسم رسم بياني بسيط باستخدام Vue وHTML5 Canvas. يمكن استخدام هذه الطريقة لرسم أي نوع من الرسوم البيانية، أو حتى محتوى ثلاثي الأبعاد باستخدام WebGL أو WebVR. استخدم خيالك!

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

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