استخدام Chart.js في الرسوم البيانية

تُعد Chart.js من أشهر مكتبات JavaScript
المستخدمة في رسم البيانات داخل صفحات الويب.
وتمتاز بأنها سهلة الاستخدام نسبيًا،
ولهذا تُعد مناسبة جدًا للمبتدئين
وللمشاريع التي تحتاج إلى رسوم واضحة وسريعة.

ما هي Chart.js؟

توضح الصفحة الأصلية أن Chart.js
هي مكتبة JavaScript مجانية لإنشاء الرسوم البيانية المعتمدة على HTML،
وأنها من أبسط مكتبات التصور في JavaScript.

كما تذكر الصفحة أن المكتبة تأتي مع مجموعة من
أنواع الرسوم المدمجة، وهي:

• Scatter Plot
• Line Chart
• Bar Chart
• Pie Chart
• Donut Chart
• Bubble Chart
• Area Chart
• Radar Chart
• Mixed Chart

كيف تستخدم Chart.js؟

توضح الصفحة أن استخدام Chart.js سهل،
ويبدأ أولًا بإضافة رابط المكتبة من الـ CDN.

<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js\"></script>

بعد ذلك يتم إضافة عنصر canvas
في المكان الذي نريد أن يظهر فيه الرسم:

<canvas id=\"myChart\" style=\"width:100%;max-width:700px\"></canvas>

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

البنية العامة لرسم في Chart.js

تعرض الصفحة 3 صيغ أساسية شائعة:

الصيغة العامة لـ Scatter Chart

const myChart = new Chart(\"myChart\", {
  type: \"scatter\",
  data: {},
  options: {}
});

الصيغة العامة لـ Line Chart

const myChart = new Chart(\"myChart\", {
  type: \"line\",
  data: {},
  options: {}
});

الصيغة العامة لـ Bar Chart

const myChart = new Chart(\"myChart\", {
  type: \"bar\",
  data: {},
  options: {}
});

وهذا يوضح أن الفكرة الأساسية في Chart.js
تعتمد على 3 عناصر:

• type لتحديد نوع الرسم
• data لوضع البيانات
• options لتخصيص شكل الرسم وسلوكه

المخططات المبعثرة Scatter Plots

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

const xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart(\"myChart\", {
  type: \"scatter\",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: \"rgba(0,0,255,1)\",
      data: xyValues
    }]
  },
  options: {}
});

هذا النوع من الرسوم مناسب عندما نريد عرض البيانات
كنقاط منفصلة وملاحظة العلاقة العامة بينها.

الرسوم الخطية Line Graphs

بعد ذلك تعرض الصفحة مثالًا على
Line Graph.
وهنا يتم تعريف قيم x في مصفوفة منفصلة،
وقيم y في مصفوفة أخرى،
ثم يتم رسمها باستخدام النوع:

type: \"line\"

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];

new Chart(\"myChart\", {
  type: \"line\",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor:\"rgba(0,0,255,1.0)\",
      borderColor: \"rgba(0,0,255,0.1)\",
      data: yValues
    }]
  },
  options: {}
});

وتوضح الصفحة أيضًا نقطة مهمة:
إذا جعلنا قيمة borderColor شفافة تمامًا،
فيمكن أن يتحول الرسم الخطي بصريًا
إلى شكل قريب من Scatter Plot.

borderColor: \"rgba(0,0,0,0)\"

الرسوم الخطية الرياضية Linear Graphs

بعد ذلك تنتقل الصفحة إلى رسم
معادلة خطية.
في هذا المثال يتم تعريف دالة بسيطة،
ثم استخدام دالة مساعدة لتوليد القيم.

const xValues = [];
const yValues = [];
generateData(\"x * 2 + 7\", 0, 10, 0.5);

new Chart(\"myChart\", {
  type: \"line\",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      pointRadius: 1,
      borderColor: \"rgba(255,0,0,0.5)\",
      data: yValues
    }]
  },
  options: {}
});

function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}

الفكرة هنا أن Chart.js لا يقتصر على عرض بيانات جاهزة فقط،
بل يمكن استخدامه أيضًا لعرض نتائج معادلات أو دوال
يتم توليدها برمجيًا.

Function Graphs

ثم تذكر الصفحة أن رسم الدوال
Function Graphs
يشبه المثال السابق تمامًا،
لكن يكفي تغيير قيمة المعادلة
التي نرسلها إلى دالة التوليد.

generateData(\"Math.sin(x)\", 0, 10, 0.5);

وهذا يسمح باستخدام Chart.js
في تمثيل سلوك الدوال الرياضية بصريًا.

Bar Charts

بعد الرسوم الخطية، تعرض الصفحة مثالًا على
Bar Charts.
وفي هذا المثال يتم تعريف أسماء الدول في x،
وكميات الإنتاج في y،
ثم اختيار النوع:

type: \"bar\"

var xValues = [\"Italy\", \"France\", \"Spain\", \"USA\", \"Argentina\"];
var yValues = [55, 49, 44, 24, 15];
var barColors = [\"red\", \"green\",\"blue\",\"orange\",\"brown\"];

new Chart(\"myChart\", {
  type: \"bar\",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {}
});

ثم تضيف الصفحة عدة ملاحظات مفيدة حول التلوين:

• يمكن تلوين كل عمود بلون مختلف
• يمكن تلوين كل الأعمدة بنفس اللون
• يمكن استخدام تدرجات من نفس اللون

تلوين عمود واحد

var barColors = [\"blue\"];

نفس اللون لكل الأعمدة

var barColors = \"red\";

تدرجات اللون

var barColors = [
  \"rgba(0,0,255,1.0)\",
  \"rgba(0,0,255,0.8)\",
  \"rgba(0,0,255,0.6)\",
  \"rgba(0,0,255,0.4)\",
  \"rgba(0,0,255,0.2)\"
];

Horizontal Bars

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

\"bar\"

إلى:

\"horizontalBar\"

وهذا يعني أن نفس البيانات يمكن عرضها
بشكل أفقي بسهولة شديدة.

Pie Charts

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

new Chart(\"myChart\", {
  type: \"pie\",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: \"World Wide Wine Production\"
    }
  }
});

Doughnut Charts

ثم توضح الصفحة أن مخطط
Doughnut
يمكن الحصول عليه بسهولة
بتغيير النوع من:

\"pie\"

إلى:

\"doughnut\"

أي أن الفرق الأساسي هنا يكون في شكل الرسم نفسه،
بين دائرة ممتلئة أو دائرة ذات فراغ داخلي.

ما الذي يميز Chart.js؟

من خلال أمثلة الصفحة يتضح أن Chart.js تتميز بأنها:

• سهلة البدء
• تعتمد على canvas فقط
• توفر أنواعًا متعددة من الرسوم بشكل جاهز
• مناسبة للبيانات التعليمية والتقارير ولوحات التحكم
• تسمح أيضًا برسم الدوال والمعادلات بشكل بسيط

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

الخلاصة

يوضح هذا الدرس أن Chart.js
هي مكتبة JavaScript مجانية وسهلة الاستخدام
لإنشاء الرسوم البيانية داخل صفحات الويب.
وتعرض الصفحة أنواعًا مدمجة متعددة مثل:
Scatter Plot وLine Chart
وBar Chart وPie Chart
وDonut Chart وغيرها.
كما تشرح عمليًا كيفية استخدام المكتبة
في رسم البيانات المبعثرة، والرسوم الخطية،
والدوال الرياضية، والأعمدة، والأعمدة الأفقية،
والرسوم الدائرية، ومخططات Doughnut.