إنشاء رسوم بيانية بسيطة باستخدام JavaScript وBootstrap
فيما يلي طريقة بسيطة لإنشاء الرسوم البيانية باستخدام JavaScript وBootstrap باستخدام البيانات التي تأتي من واجهة برمجة التطبيق (API) بتنسيق JSON الذي قدمته. يتم تحقيق ذلك من خلال استخدام مكتبة Chart.js وBootstrap لتصميم الواجهة.
أولاً وقبل كل شيء، يجب عليك تضمين مكتبة Chart.js و Bootstrap في مشروعك. يمكنك القيام بذلك عبر روابط CDN أو من خلال تحميل الملفات وتضمينها محليًا. على سبيل المثال:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graph Generationtitle>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js">script>
head>
<body>
<div class="container mt-5">
<canvas id="myChart">canvas>
div>
<script>
// استعداد البيانات
const jsonData = [
{
"battery": "22.7",
"temperature": "80",
"speed": "77",
"time": "2016-02-12 14:09:04"
},
{
"battery": "22.8",
"temperature": "82",
"speed": "99",
"time": "2016-02-12 14:09:04"
},
{
"battery": "22.7",
"temperature": "80",
"speed": "77",
"time": "2016-02-12 14:08:22"
}
];
// استخراج البيانات
const labels = jsonData.map(data => data.time);
const batteryData = jsonData.map(data => parseFloat(data.battery));
const temperatureData = jsonData.map(data => parseFloat(data.temperature));
const speedData = jsonData.map(data => parseFloat(data.speed));
// إعداد الرسم البياني
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Battery',
data: batteryData,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
},
{
label: 'Temperature',
data: temperatureData,
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
fill: false
},
{
label: 'Speed',
data: speedData,
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1,
fill: false
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">script>
body>
html>
يقوم الكود أعلاه بتضمين مكتبة Chart.js و Bootstrap، ومن ثم يقوم بإعداد البيانات من الـ JSON الذي قدمته. يتم رسم البيانات على الرسم البياني باستخدام مكتبة Chart.js، حيث يتم عرض قيم البطارية، درجة الحرارة، والسرعة على محور y في الوقت المحدد على محور x.
يمكنك تخصيص الرسم البياني وفقًا لاحتياجاتك الخاصة، مثل تغيير الألوان أو إضافة مزيد من الخيارات. هذا يوفر لك أساسًا بسيطًا للبدء في إنشاء رسوم بيانية باستخدام JavaScript وBootstrap باستخدام البيانات الخاصة بك.
المزيد من المعلومات
بالطبع، دعنا نوسع الموضوع لنغوص أعماق الطريقة التي استخدمتها لرسم الرسم البياني باستخدام JavaScript وBootstrap بناءً على البيانات المقدمة. سنتناول المزيد من التفاصيل حول تخصيص الرسم البياني وتحسين تجربة المستخدم.
تحسين تكامل Bootstrap:
لتحسين تكامل مظهر الرسم البياني مع Bootstrap، يُفضل تكاملهما بشكل أفضل معًا. يمكنك استخدام الفصول (Classes) في Bootstrap لتخصيص الألوان والحواف والمسافات بشكل أفضل. على سبيل المثال، يمكنك إضافة فصل “text-primary” إلى التسمية لتحديد لون النص باستخدام اللون الرئيسي في Bootstrap.
html// مثال على تحسين تكامل Bootstrap
<label class="text-primary">Batterylabel>
تحسين البيانات:
قد ترغب في تحسين البيانات المُرَسَّمَة بشكل أكبر، مثل تحويل الوقت إلى تنسيق أفضل أو تحسين تقديم القيم الرقمية. يمكنك استخدام مكتبة مثل moment.js لتنسيق الوقت بشكل أفضل.
javascript// مثال على تحسين تنسيق الوقت باستخدام moment.js
const formattedTime = jsonData.map(data => moment(data.time).format('YYYY-MM-DD HH:mm:ss'));
إضافة تسميات وواجهة المستخدم:
لتحسين تجربة المستخدم، يمكنك إضافة تسميات للمحاور والرسم البياني. يمكنك أيضًا إضافة واجهة المستخدم للتفاعل مع الرسم البياني، مثل إضافة مرشحات لعرض بيانات معينة أو تغيير نوع الرسم البياني.
تحسين الاستجابة:
لجعل الرسم البياني أكثر استجابة، يُفضل تحسين الرسم البياني ليتناسب مع أحجام الشاشات المختلفة. يمكنك استخدام Bootstrap Grid System لتحقيق ذلك.
html
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<canvas id="myChart">canvas>
div>
<div class="col-md-4">
div>
div>
div>
هذه بعض الأفكار التي يمكن تنفيذها لتحسين وتوسيع تطبيق الرسم البياني باستخدام JavaScript وBootstrap. يعتمد تحسين التفاصيل على احتياجات مشروعك ومتطلبات التصميم، ولكن هذه النصائح يمكن أن تكون نقطة انطلاق جيدة لجعل تجربة المستخدم أفضل وتحسين الرسم البياني بشكل عام.