مكتبة لرسم الرسوم البيانية. مكتبة التصور Dygraphs

تعتبر الرسوم البيانية وسيلة مساعدة بصرية ممتازة عند عرض البيانات. بدونها، من المستحيل إنشاء لوحة إدارة عالية الجودة. فهي ليست بهذه السهولة في التثبيت. ومع ذلك، هناك مكتبة جديدة تسهل هذه المهمة - xCharts. سنستخدم اليوم هذا البرنامج جنبًا إلى جنب مع لوحة نطاق التاريخ الخاصة بـ Twitter Bootstrap لإنشاء رسم بياني AJAX جميل لتطبيق الويب الخاص بك والذي يسحب البيانات من جداول ماي إس كيو إل.

لغة البرمجة

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

Index.php

مخططات جميلة مع jQuery وAJAX | البرنامج التعليمي التجريبي

يتم استخدام الكثير هنا موارد خارجية. في القسم الرئيسي لدينا ملفات أوراق الأنماط المتتالية لـ xCharts، وفارز الأرقام، والتحميل (المتكامل من السرعة الفائقة CDN كلاودفلير)، وملف style.css الخاص بنا.

قبل إغلاق اختصار الجدول، لدينا مكتبة JQuery، d3.js (مطلوب لبرنامج xсharts)، xcharts، مكتبة بها واجهة سهلة الاستخدام Sugar.js (الذي يتطلب مكونًا إضافيًا "لنطاق التاريخ")، ومكونًا إضافيًا "لنطاق التاريخ"، وملف script.js. بعد ذلك سترى كيف يعمل كل شيء معًا.

ماي إس كيو إل

كما ذكرت في المقدمة، فإن البرنامج النصي الذي نكتبه سيجلب البيانات من جدول MySQL ويعرضها في مخطط. يمكنك العثور على كود SQL الذي سيقوم بإنشاء الجدول في schema.sql ملف مضغوط، متاح للتنزيل باستخدام الأزرار العلوية. سيبدو الجدول كالتالي:

لديها ثلاثة أعمدة فقط. يتم تعيين فهرس فريد لعمود التاريخ، مما يعني أنه لا يمكن أن تكون هناك إدخالات مكررة في نفس اليوم. يسجل عمود "سجلات المبيعات" عدد المبيعات خلال اليوم. من المؤكد أن قاعدة البيانات الخاصة بك ستكون مختلفة، ولكن طالما أنك حصلت على الإجابة الصحيحة في التنسيق الخاص بتنظيم البيانات في تنسيق نصي بسيط يستخدم لتبادل معلومات JSON من برنامج PHP النصي، فلن تكون هناك مشاكل (المزيد حول هذا في المقالة التالية) قسم).

ملحوظة: لا تنسى إدخال بياناتك اتصالات ماي إس كيو إلفي setup.php. ستحتاج بعد ذلك إلى إنشاء قاعدة بيانات MySQL جديدة واستيراد schema.sql من نظام PHPMyAdmin أو نظام الإدارة الذي اخترته.

بي أتش بي

في لدينا PHP النصيسنختار السجلات من الجدول التي تتوافق مع معلومات البداية والنهاية المرسلة، ونجمع كل البيانات في مصفوفة، ونخرجها بتنسيق تبادل البيانات النصية (JSON):

ajax.php

Header("نوع المحتوى: application/json"); // إعداد المكتبة require_once("setup.php"); إذا (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // تحديد النتائج $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date"); ->find_array(); // إنشاء مصفوفة جديدة تحتوي على بيانات foreach ($تنتج كـ $key => $value) ( ​​​​$data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; echo json_encode($data);

أنا هنا أستخدم مكتبتي المفضلة - Idiorm. لقد استخدمته في الماضي لإجراء مشاورات حول موقع الويب (والعديد من المشاريع الشخصية). هذا ملف واحد فقط (موجود في المكتبة/المجلد) ويجعل العمل مع قواعد البيانات أمرًا سهلاً للغاية. كل ما أفعله هو جلب جميع النتائج من قاعدة البيانات التي لها قيمة زمنية بين الطوابع الزمنية للبداية والنهاية بما يتوافق مع طلب استرداد المعلومات.

تبدو استجابة JSON الناتجة كما يلي:

[( "التسمية": "07-01-2013"، "القيمة": "4" )، ( "التسمية": "06-01-2013"، "القيمة": "65")، ( "التسمية": "05/01/2013"، "القيمة": "96")]

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

جافا سكريبت

جميع أكواد JS موجودة في الأصول/js/script.js. الكود طويل بعض الشيء، ولتسهيل متابعته، سأقدمه لك على أجزاء.

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

الأصول / شبيبة / البرنامج النصي. js

$(function() ( // تعيين التواريخ القياسية باستخدام دوال الشوغار var startDate = Date.create().addDays(-6), // قبل 6 أيام endDate = Date.create(); // اليوم var range = $ ( "#range"); // عرض التواريخ بترتيب الإدخال range.val(startDate.format("(MM)/(dd)/(yyyy)") + " - " + endDate.format("(MM)/ (dd)/(yyyy)")); // تحميل المخطط ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Today": ["today", "today " ], "أمس": ["أمس", "أمس"], "آخر 7 أيام": , "آخر 30 يومًا": // يمكنك إضافة المزيد من الإدخالات هنا ) ),function(start, end)( ajaxLoadChart( بداية النهاية ))؛

كما ترون، لقد نجحنا في استخدام معلومات وأساليب Sugar.js لتحديد الملف الأولي و نقطة النهايةيتراوح. لقد أدخلت نتائج آخر 7 أيام في البرنامج النصي، وقمت بتحديث حقل إدخال النطاق.

الآن لنقم بإنشاء رسم بياني:

// تلميح عند الإشارة إلى المخطط var tt = $("").appendTo("body"), topOffset = -32; var data = ( "xScale" : "time"، "yScale" : "linear"، "main" : [( className: ".stats"، "data" : )] ); var opts = ( paddingLeft: 50, paddingTop: 20, paddingRight: 10, axisPaddingLeft: 25, TickHintX: 9, // كم عدد علامات التجزئة التي سيتم عرضها أفقيًا dataFormatX: function(x) ( // هنا الطابع الزمني الذي جاء مع // ajax يتم تحويل .php إلى كائن تاريخ JavaScript المطابق return Date.create(x); TickFormatX: function(x) (// قم بتعيين تنسيق التسمية للمحور x return x.format("(MM)/(dd) "); ), "mouseover": الوظيفة (d, i) ( var pos = $(this).offset(); tt.text(d.x.format("(Month) (ord)") + ": " + d.y ).css(( top: topOffset + pos.top, left: pos.left )).show(); "mouseout": function (x) ( tt.hide(); ) ); // قم بإنشاء مثيل xChart جديد، وقم بتمرير نوع الرسومات // ومجموعة من التواريخ و وظائف اضافيه var Chart = new xChart("line-dotted", data, "#chart" , opts);

أولاً أقوم بتعريف كائن تكوين xCharts بخصائصه و وظائف عكسية. في خاصية dataFormatX أقوم بتحويل سلاسل yyyy-mm-dd التي تم إرجاعها من طلب AJAX إلى السلاسل المناسبة كائنات جافا سكريبتالتاريخ حتى يتمكن البرنامج الإضافي من عرضها بشكل صحيح وإجراء حساباته.

أستخدم أيضًا معالج معلومات للمكون الإضافي mouseover/mouseout، وأستخدمه لإظهار تلميح الأدوات (لا يأتي المكون الإضافي مع إحدى الوحدات).

وأخيرًا، إليك وظيفة JavaScript لتحميل البيانات عبر AJAX:

// دالة لتحميل البيانات عبر AJAX وعرضها على المخطط function ajaxLoadChart(startDate,endDate) ( // إذا لم تكن هناك بيانات، سيكون المخطط فارغًا if(!startDate || !endDate)( Chart.setData(( "xScale" : "time"، "yScale" : "linear"، "main" : [( className: ".stats"، data: )] )); // وإلا، قم بإنشاء طلب ajax $.getJSON ("ajax.php ", ( البداية: startDate.format("(yyyy)-(MM)-(dd)"), النهاية: endDate.format("(yyyy)-(MM)-(dd)")) ، دالة (بيانات) ( var set = ; $.each(data, function() ( set.push(( x: this.label, y: parseInt(this.value, 10) )); )); Chart.setData (("xScale" : "time"، "yScale" : "linear"، "main" : [( className: ".stats"، data: set )] ));

يوفر xCharts طريقة setData حتى تتمكن من نقل البيانات المعروضة أو استبدالها بسهولة. تعد سمة className مهمة لأنها ما يستخدمه البرنامج المساعد لتعريف الرسم البياني الخاص بك. إذا تجاهلت ذلك، يمكن أن تحدث جميع أنواع الأخطاء الغريبة (ثق بي، أنا أعلم).

هذا يكمل مخططنا الجميل!

نهاية!

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

• ترجمة

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

في هذه المقالة سأعرض لك بعضًا منها أفضل جافا سكريبتمكتبات لإنشاء الرسوم البيانية/المخططات (والجداول المحورية). ستساعدك هذه المكتبات في إنشاء رسومات جميلة وقابلة للتخصيص لمشاريعك المستقبلية.

على الرغم من أن معظم المكتبات مجانية وقابلة لإعادة التوزيع، إلا أن بعضها لديه إصدارات مدفوعة مع وظائف إضافية.

D3.js - المستندات التي تركز على البيانات اليوم، عندما نفكر في الرسوم البيانية، أول ما يتبادر إلى ذهننا هو D3.js. مفتوح المصدرالمشروع، D3.js، بلا شك، يعطي الكثير ميزات مفيدةوالتي تفتقر إليها معظم المكتبات الموجودة. ميزات مثل "Enter and Exit"، والانتقالات القوية، وبناء الجملة المشابه لـ jQuery أو Prototype تجعلها واحدة من أفضل مكتبات JavaScript لإنشاء الرسوم البيانية والمخططات. في D3.js، يتم إنشاؤها باستخدام HTML وSVG وCSS.

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

لا يعمل D3.js بشكل صحيح مع المتصفحات الأقدم مثل IE8. ولكن يمكنك دائمًا استخدام المكونات الإضافية مثل البرنامج المساعد aight للتوافق عبر المتصفحات.

تم استخدام D3.js سابقًا على نطاق واسع على مواقع الويب مثل NYTimes وUber وWeather.com

مخططات جوجل

مخططات جوجل - مكتبة جافا سكريبتوالتي أستخدمها بانتظام لإنشاء الرسوم البيانية ببساطة وسهولة. يوفر العديد من المخططات المعدة مسبقًا مثل المخططات الشريطية المجمعة، والمخططات الشريطية، مخططات التقويموالمخططات الدائرية والرسوم البيانية الجغرافية وما إلى ذلك.

تحتوي مخططات Google أيضًا على مجموعة متنوعة من إعدادات التكوين التي يمكن أن تساعدك في تغيير مظهر مخططك. يتم إنشاء الرسومات باستخدام HTML5/SVG لضمان التوافق عبر المتصفحات وإمكانية النقل عبر الأنظمة الأساسية لأجهزة iPhone وiPad وAndroid. يحتوي أيضًا على VML لدعم إصدارات IE الأقدم.

Highcharts شبيبة

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

واحدة من أكبر مزايا استخدام HighchartsJS هي توافقها مع المتصفحات القديمة مثل متصفح الانترنت 6. تستخدم المتصفحات القياسية SVG لعرض الرسومات. في IE القديم، يتم إنشاء الرسوم البيانية عبر VML.

على الرغم من أن HighchartsJS مجاني استخدام شخصي، فأنت بحاجة إلى شراء ترخيص للاستخدام التجاري.

مخططات الانصهار

تعد Fusioncharts واحدة من أقدم مكتبات JavaScript، وتم إصدارها لأول مرة في عام 2002. يتم إنشاء الرسوم البيانية باستخدام HTML5/SVG وVML لتحسين قابلية النقل والتوافق.

على عكس العديد من المكتبات، توفر Fusioncharts القدرة على تحليل بيانات JSON وXML. يمكنك أيضًا تصدير هذه الرسوم البيانية إلى 3 تنسيقات مختلفة: PNG، JPG و PDF.

تتوافق Fusioncharts بشكل كبير مع المتصفحات القديمة مثل IE6. ولهذا السبب أصبحت واحدة من المكتبات المفضلة لدى العديد من المنظمات التجارية.

يمكنك استخدام الإصدار ذو العلامة المائية من Fusioncharts مجانًا في كل من المشاريع الشخصية والتجارية. ومع ذلك، تحتاج إلى شراء ترخيص للتخلص من العلامة المائية.

تعويم

Flot هي مكتبة JavaScript لـ JQuery تتيح لك إنشاء رسوم بيانية/مخططات. واحدة من أقدم وأشهر مكتبات الرسوم البيانية.

يدعم Flot المخططات الشريطية، والمخططات المبعثرة، والمخططات الشريطية، والمخططات العمودية، وأي مجموعة من أنواع المخططات هذه. متوافق أيضًا مع المتصفحات الأقدم مثل IE 6 وFirefox 2.

Flot مجاني تمامًا، الدعم التجاريمتاحة بناء على طلب خاص للمطور. فيما يلي قائمة بأمثلة المخططات التي تم إنشاؤها في Flot.

amCharts

تعد amCharts بلا شك واحدة من أفضل مكتبات الرسوم البيانية الموجودة على الإطلاق. وهي مقسمة بالكامل إلى 3 أنواع مستقلة: مخططات JavaScript ومخططات الخرائط (amMaps) ومخططات الأسهم.

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

يتوفر مخطط EJS في الإصدارات المجانية والمدفوعة. نسخة مجانيةله قيود لا تسمح لك باستخدام أكثر من مخطط واحد لكل صفحة وأكثر من تسلسلين (رقميين) لكل مخطط. تحقق من تفاصيل التسعير.

uvCharts

uvCharts هي مكتبة JavaScript مفتوحة المصدر تدعي أنها تحتوي على أكثر من 100 خيار تكوين. يحتوي على مخططات لـ 12 معيارًا مختلفًا بمجرد إخراجها من الصندوق.

تم إنشاء UvCharts على مكتبة D3.js. يعد هذا المشروع بالقضاء على جميع الفروق الدقيقة المعقدة في ترميز D3.js وتوفير تنفيذ سهل للرسوم البيانية طريقة العرض القياسية. يتم إنشاء uvCharts باستخدام SVG، HTML وCSS.

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

آمل أن يحظى هذا المقال بإعجابكم. اتمنى لك يوم جيد.

العلامات: إضافة العلامات

لقد تعلمت كيفية تثبيت واستخدام Chart.js. لقد تعلمت أيضًا بعض الخيارات العامة التي تتيح لك تغيير الخط وتلميحات الأدوات للرسوم البيانية المختلفة. ستتعرف في هذا البرنامج التعليمي على كيفية إنشاء مخططات خطية وعمودية باستخدام Chart.js.

إنشاء المخططات الخطية

تكون المخططات الخطية مفيدة عندما تريد إظهار التغير في قيمة متغير معين بالنسبة للتغيرات في بعض المتغيرات الأخرى. المتغير الآخر عادة ما يكون مؤقتا. على سبيل المثال، يمكن استخدام المخططات الخطية لإظهار سرعة السيارة خلال فترات زمنية محددة.

يتيح لك Chart.js إنشاء مخططات خطية عن طريق ضبط النوع على خط. هنا مثال:

var lineChart = new Chart(speedCanvas, ( type: "line"، البيانات: speedData، options: ChartOptions ));

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

var speedData = (التسميات: ["0s"، "10s"، "20s"، "30s"، "40s"، "50s"، "60s"]، مجموعات البيانات: [(التسمية: "سرعة السيارة"، البيانات: ، )]); var ChartOptions = ( legend: (display: true, Position: "top"، labels: ( boxWidth: 80, FontColor: "black" ) ));

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

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

شيء آخر ربما لاحظته هو أننا نستخدم مؤشرات (نقاط) بيانات فردية لرسم المخطط. تقوم المكتبة تلقائيًا باستيفاء قيم جميع النقاط الأخرى باستخدام الخوارزميات المدمجة.

افتراضيًا، يتم رسم النقاط باستخدام الاستيفاء المكعب المرجح المخصص. ومع ذلك، يمكنك ضبط مفتاح cubeInterpolationMode على نغمة رتيبة للحصول على رسم أكثر دقة للنقاط إذا تم تعريف المخطط الذي تقوم بإنشائه بالمعادلة y = f (x) . يتم تحديد مرونة منحنى Bezier بواسطة مفتاح lineTension. يمكنك ضبط قيمته يساوي الصفرلرسم خطوط مستقيمة. لاحظ أنه يتم تجاهل هذا المفتاح إذا تم تحديد cubeInterpolationMode بالفعل.

يمكنك أيضًا تعيين لون الحدود وعرضها باستخدام مفتاحي borderColor و borderWidth. إذا كنت تريد رسم مخطط باستخدام خط منقط بدلاً من خط متصل، فيمكنك استخدام مفتاح borderDash. يستغرق الأمر مصفوفة كقيم، تحدد عناصرها طول الحدود وتباعدها، على التوالي.

يمكن التحكم في مظهر النقاط المرسومة باستخدام خصائص pointBorderColor، وpointBackgroundColor، وpointBorderWidth، وpointRadius، وpointHoverRadius. يوجد أيضًا مفتاح pointHitRadius، الذي يحدد المسافة التي ستبدأ منها النقاط على الرسم البياني في التفاعل مع الماوس.

var speedData = (التسميات: ["0s"، "10s"، "20s"، "30s"، "40s"، "50s"، "60s"]، مجموعات البيانات: [(التسمية: "سرعة السيارة"، البيانات: ، توتر الخط: 0، التعبئة: خطأ، لون الحدود: "برتقالي"، لون الخلفية: "شفاف"، حد داش:، لون نقطة الحدود: "برتقالي"، لون خلفية النقطة: "rgba(255,150,0,0.5)"، نصف قطر النقطة: 5، نصف قطر النقطة: 10، pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" )] );

يعرض كائن speedData أعلاه نفس نقاط البيانات مثل الرسم البياني السابق، ولكن مع تعيين قيم مختلفة لجميع الخصائص.

يمكنك أيضًا رسم خطوط متعددة على نفس الرسم البياني وتعيين معلمات مختلفة لرسم كل منها على النحو التالي:

var dataFirst = ( label: "Car A - Speed ​​​​(mph)"، data: , lineTension: 0.3, // تعيين المزيد من الخيارات ); var dataSecond = ( label: "Car B - Speed ​​​​(mph)"، data: , // تعيين المزيد من الخيارات ); var speedData = (التسميات: ["0s"، "10s"، "20s"، "30s"، "40s"، "50s"، "60s"]، مجموعات البيانات: ); var lineChart = new Chart(speedCanvas, ( type: "line", data: speedData ));

خلق المخططات الشريطية

تكون المخططات العمودية (أو الرسوم البيانية) مفيدة عندما تريد مقارنة قياس واحد لكائنات مختلفة - على سبيل المثال، عدد السيارات المباعة شركات مختلفةأو عدد أشخاص معين الفئة العمريةفي المدينة. يمكنك إنشاء مخططات شريطية في Chart.js عن طريق ضبط مفتاح الكتابة على bar . افتراضيًا، سيؤدي هذا إلى إنشاء مخططات ذات أشرطة رأسية. إذا كنت تريد إنشاء مخططات بأشرطة أفقية، فيجب عليك ضبط النوع على HorizontalBar .

var barChart = new Chart(densityCanvas, ( type: "bar"، البيانات: DensityData، options: ChartOptions ));

لنقم بإنشاء رسم بياني يعرض كثافة جميع الكواكب الموجودة في كوكبنا النظام الشمسي. تم أخذ بيانات الكثافة من قائمة معلومات الكوكب المقدمة من وكالة ناسا.

Var DensityData = (تسمية: "كثافة الكواكب (كجم/م3)"، البيانات: ); var barChart = new Chart(densityCanvas, ( type: "bar"، البيانات: ( التسميات: ["عطارد"، "الزهرة"، "الأرض"، "المريخ"، "المشتري"، "زحل"، "أورانوس"، " نبتون"]، مجموعات البيانات: ) ));

ستؤدي الخيارات المذكورة أعلاه إلى إنشاء المخطط التالي:

تمامًا كما هو الحال في المخططات الخطية، تتم تعبئة الأشرطة باللون الرمادي الفاتح. يمكنك تغيير لون الأشرطة باستخدام مفتاح لون الخلفية. وبالمثل، يمكن ضبط لون وعرض حدود الخطوط المختلفة باستخدام مفتاحي borderColor و borderWidth.

إذا كنت تريد أن لا ترسم المكتبة حدودًا لجانب معين، فيمكنك تحديد الجانب كقيمة لمفتاح BorderSkipped. يمكنك ضبط القيم التالية: أعلى أو يسار أو أسفل أو يمين. يمكنك أيضًا تغيير الحدود ولون الخلفية للأشرطة المتنوعة التي تراها عند تحريك الماوس فوقها باستخدام hoverBorderColor وhoverBackgroundColor .

تم حساب حجم الأعمدة في المخطط الشريطي أعلاه تلقائيًا. ومع ذلك، يمكنك التحكم في عرض الأعمدة الفردية باستخدام خاصيتي barThickness وbarPercentage. يتم استخدام مفتاح barThickness لتعيين سمك الأعمدة بالبكسل، ويتم استخدام barPercentage لتعيين السُمك كنسبة مئوية من عرض المجموعة المتاح.

لنجعل مخطط الكثافة (الكوكب) أكثر إثارة للاهتمام من خلال تجاوز القيم الافتراضية للرسوم البيانية باستخدام الكود التالي.

بيانات كثافة فار = (التسمية: "كثافة الكواكب (كجم/م3)"، البيانات: ، لون الخلفية: [ "rgba(0, 99, 132, 0.6)", "rgba(30, 99, 132, 0.6)"، " rgba (60، 99، 132، 0.6)"، "rgba (90، 99، 132، 0.6)"، "rgba (120، 99، 132، 0.6)"، "rgba (150، 99، 132، 0.6)" ، "rgba(180، 99، 132، 0.6)"، "rgba(210، 99، 132، 0.6)"، "rgba(240، 99، 132، 0.6)" ]، لون الحدود: [ "rgba(0، 99) ، 132، 1)"، "rgba (30، 99، 132، 1)"، "rgba (60، 99، 132، 1)"، "rgba (90، 99، 132، 1)"، "rgba (120) ، 99، 132، 1)، "rgba (150، 99، 132، 1)"، "rgba (180، 99، 132، 1)"، "rgba (210، 99، 132، 1)"، "rgba ( 240، 99، 132، 1)" ]، borderWidth: 2, hoverBorderWidth: 0 ); var ChartOptions = ( المقاييس: ( yAxes: [( barPercentage: 0.5 )] )، العناصر: ( مستطيل: ( borderSkipped: "left"، ) ) ); var barChart = new Chart(densityCanvas, ( type: "horizontalBar"، البيانات: (التسميات: ["عطارد"، "الزهرة"، "الأرض"، "المريخ"، "المشتري"، "زحل"، "أورانوس"، " نبتون"]، مجموعات البيانات: ، ، options: ChartOptions ));

يتم استخدام كائن DensityData لتعيين الحدود و لون الخلفيةأعمدة. هناك شيئان يجب ملاحظتهما في الكود أعلاه. أولاً، تم تعيين قيم الخاصيتين barPercentage و borderSkipped داخل كائن ChartOptions بدلاً من كائن dataDensity.

ثانيًا، هذه المرة تم تعيين نوع المخطط على HorizontalBar . مما يعني أيضًا أنه سيتعين عليك تغيير قيمة barThickness وbarPercentage للمحور Y بدلاً من المحور X حتى يكون لهذه القيم أي تأثير على الأعمدة.

ستؤدي الخيارات المذكورة أعلاه إلى إنشاء الرسم البياني التالي.

يمكنك أيضًا رسم مجموعات بيانات متعددة على نفس المخطط عن طريق تعيين معرف محور محدد لمجموعة بيانات محددة. يتم استخدام مفتاح xAxisID لتعيين معرف لأي محور X في مجموعة البيانات الخاصة بك. وبالمثل، يتم استخدام مفتاح yAxisID لتعيين معرف لأي محور في مجموعة البيانات الخاصة بك. يحتوي كلا المحورين أيضًا على مفتاح معرف، والذي يمكنك استخدامه لتعيين معرفات فريدة لهما.

إذا كانت الفقرة الأخيرة مربكة بعض الشيء، فإن المثال التالي سيساعد في توضيح الأمور.

بيانات كثافة فار = (التسمية: "كثافة الكوكب (كجم/م3)"، البيانات:، لون الخلفية: "rgba(0, 99, 132, 0.6)"، لون الحدود: "rgba(0, 99, 132, 1)"، yAxisID: "كثافة المحور y" ); var GravityData = (التسمية: "جاذبية الكوكب (م/ث2)"، البيانات:، لون الخلفية: "rgba(99, 132, 0, 0.6)"، لون الحدود: "rgba(99, 132, 0, 1)"، yAxisID: "جاذبية المحور y" ); var PlanetData = ( التسميات: ["عطارد"، "الزهرة"، "الأرض"، "المريخ"، "المشتري"، "زحل"، "أورانوس"، "نبتون"]، مجموعات البيانات: ); var ChartOptions = ( المقاييس: ( xAxes: [( barPercentage: 1,categoryPercentage: 0.6 )], yAxes: [( id: "y-axis-density" ), ( id: "y-axis-gravity" )] ) ) ; var barChart = new Chart(densityCanvas, ( type: "bar, data: PlanetData, options: ChartOptions ));

قمنا هنا بإنشاء محورين Y بمعرفات فريدة وتم تخصيصهما لمجموعات بيانات منفصلة باستخدام مفتاح yAxisID. يتم استخدام مفتاحي barPercentage وcategoryPercentage لتجميع الأعمدة الخاصة بالكواكب الفردية. نقوم بضبط الفئة المئوية على قيمة أقل لزيادة المسافة بين أعمدة الكواكب المختلفة. وبالمثل، من خلال تعيين barPercentage على قيمة أعلى، فإننا سوف نقوم بتقليل المسافة بين أشرطة نفس الكوكب.

أخيرا

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

وآمل أن يتمتع هذا البرنامج التعليمي. إذا كان لديك أي أسئلة، يرجى نشرها في التعليقات.

في هذه المقالة سوف نقوم بإنشاء الرسم البياني التفاعليباستخدام CSS3 و jQuery. سوف نستخدم مكتبة jQuery الشهيرة - Flot. Flot هي مكتبة (لـ جافا سكريبت النقي)، مصمم لرسم الرسوم البيانية، ويستخدم في jQuery. هذا البرنامج المساعد بسيط ولكنه قوي بما يكفي لإنشاء رسومات جميلة وتفاعلية. ل معلومات اكثرللحصول على معلومات حول المكتبة، يرجى الرجوع إلى وثائق الأسطول الرسمية.

ترميز HTML

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

زوار HTMLالزوار العائدين jQuery ومكتبة Flot

دعونا نربط جافا سكريبت. أولا، دعونا نربط مكتبة jquery (على سبيل المثال، من جوجل). يمكنك استخدام نفس الرابط أو تنزيل الملف ج مكتبة مسجإلى الخادم الخاص بك. ثم قم بتنزيل ملفات Flot وقم بتضمين jquery.flot.min.js.

HTML $(document).ready(function () ( // نصوص الرسم البياني هنا )); بيانات الرسم البياني

بيانات الرسم البياني عبارة عن مصفوفة من النموذج: . سنقوم أيضًا بتعيين خيارات مخصصة لكل نوع بيانات.

jQuery var graphData = [( // بيانات الزيارات: [ , , , , , , , , ], color: "#71c73e" ), ( // بيانات الزيارات المتكررة: [ , , , , , , , ], color : "#77b7c5"، النقاط: (نصف القطر: 4، لون التعبئة: "#77b7c5") ) ]; تحميل المخططات

الآن سنقوم بتحميل رسمين بيانيين، سطر واحد، والشريط الآخر. كلاهما لديه العديد من الخيارات المخصصة (اللون، الظل، وما إلى ذلك). يستخدم كلاهما أيضًا بيانات من متغير graphData.

jQuery // Linear $.plot($("#graph-lines")، graphData، (سلسلة: (نقاط: (إظهار: صحيح، نصف القطر: 5)، خطوط: (إظهار: صحيح)، حجم الظل: 0)، شبكة : (اللون: "#646464"، لون الحدود: "شفاف"، عرض الحدود: 20، قابل للتحويم: صحيح)، المحور س: (tickColor: "شفاف"، القراد العشري: 2)، المحور الصادي: (tickSize: 1000 )); // القضبان $.plot($("#graph-bars")، graphData، (السلسلة: ( القضبان: (إظهار: صحيح، عرض الشريط: .9، محاذاة: "مركز")، حجم الظل: 0)، الشبكة: ( اللون: "#646464"، لون الحدود: "شفاف"، عرض الحدود: 20، قابل للتحويم: صحيح)، المحور س: (tickColor: "شفاف"، القراد العشري: 2)، المحور الصادي: (tickSize: 1000 )); أنماط الكتلة المجمعة وأبنائها

أولاً، دعونا نعيد تعيين الأنماط الافتراضية لجميع العناصر الموجودة في المجموعة الأصلية للرسوم البيانية (من الممارسات الجيدة أن نبدأ تخطيط موقع الويب باستخدام اتصالات إعادة تعيين النمط).

CSS /* إعادة التعيين */ .graph-container, .graph-container div, .graph-container a, .graph-containerspan ( الهامش: 0; الحشو: 0; ) أضف تدرجًا و زوايا مدورةالمجمع والأزرار وتلميحات الأدوات. CSS /* التدرج والزوايا المستديرة */ .graph-container, #tooltip, .graph-info a ( الخلفية: #ffffff; الخلفية: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); الخلفية: -webkit-gradient(linear، أعلى اليسار، أسفل اليسار، color-stop(0%,#ffffff)، color-stop(100%,#f9f9f9) الخلفية: -webkit-linear-gradient(top, #) ffffff 0%,#f9f9f9 100%); الخلفية: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); 100%)؛ الخلفية: تدرج خطي (إلى الأسفل، #ffffff 0%،#f9f9f9 100%))؛ -webkit-border-radius: 3px;

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

CSS /* حاوية الرسم البياني */ .graph-container ( الموضع: نسبي؛ العرض: 550 بكسل؛ الارتفاع: 300 بكسل؛ الحشو: 20 بكسل؛ -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); مطلق؛ العرض: وراثة؛ الأعلى: 10 بكسل؛ معلومات الرسم البياني (العرض: 590 بكسل؛ الهامش السفلي: 10 بكسل؛)

الأسطورة والأزرار

لنبدأ بإضافة الأنماط الأساسيةللروابط. بالنسبة إلى أساطير الرسم البياني، فلنقم بإنشاء دائرة صغيرة بنفس لون الرسوم البيانية نفسها (خط/شريط). لإنشاء دائرة سنستخدم المحدد الزائف:before . سيسمح لنا هذا المحدد بإدراج المحتوى قبل محتوى العنصر الذي يتم إلحاقه به.

CSS .graph-info a ( الموضع: نسبي؛ العرض: كتلة مضمنة؛ تعويم: يسار؛ الارتفاع: 20 بكسل؛ الحشو: 7 بكسل 10 بكسل 5 بكسل 30 بكسل؛ الهامش الأيمن: 10 بكسل؛ زخرفة النص: لا شيء؛ المؤشر: افتراضي؛ ) CSS /* دوائر الألوان */ .graph-info a:before ( الموضع: مطلق؛ العرض: كتلة؛ المحتوى: ""؛ العرض: 8px؛ الارتفاع: 8px؛ الأعلى: 13px؛ اليسار: 13px؛ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .معلومات الرسم البياني .الزائرون: قبل ( الخلفية: #71c73e; ) .معلومات الرسم البياني .العودة: قبل ( الخلفية: #77b7c5; )

بعد ذلك، سنضيف أنماطًا إلى الزرين اللذين يسمحان لنا بالتبديل بين الرسوم البيانية الخطية والشريطية.

وأخيرا، دعونا نمنع الكتل من الانهيار.

CSS /* مسح العوامات */ .graph-info: قبل، .graph-info: بعد، .graph-container: قبل، .graph-container: after ( content: ""؛ العرض: block؛ واضح: كلاهما؛ ) Switch الرسوم البيانية

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

jQuery $("#graph-bars").hide(); $("#lines").on("click"، الوظيفة (e) ( $("#bars").removeClass("active"); $("#graph-bars").fadeOut(); $( this).addClass("active"); $("#graph-lines").fadeIn(); $("#bars").on("click"، الوظيفة (e) ( $("#lines").removeClass("active"); $("#graph-lines").fadeOut(); $( this).addClass("active"); $("#graph-bars").fadeIn().removeClass("hidden"); نص

إضافة خط وأنماط للنص.

CSS #tooltip, .graph-info a ( عائلة الخط: "Helvetica Neue"، Helvetica، Arial، sans-serif؛ وزن الخط: غامق؛ حجم الخط: 12 بكسل؛ ارتفاع الخط: 20 بكسل؛ اللون: #646464؛ ) .tickLabel ( وزن الخط: غامق؛ حجم الخط: 12 بكسل؛ اللون: #666؛ عائلة الخط: "Helvetica Neue"، Helvetica، Arial، sans-serif؛ )

لنخفي أنماط القيمة الأولى والأخيرة على طول المحور y:

CSS .yAxis .tickLabel: الطفل الأول، .yAxis .tickLabel: الطفل الأخير ( العرض: لا شيء؛ ) تلميح الأدوات

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

وظيفة jQuery showTooltip(x, y, contents) ( $("" + content + "").css(( top: y - 16, left: x + 20 )).appendTo("body").fadeIn(); ) var PreviousPoint = null; $("#graph-lines, #graph-bars").bind("plothover"، وظيفة (حدث، موضع، عنصر) ( if (item) ( if (previousPoint != item.dataIndex) ( PreviousPoint = item.dataIndex ; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint; ; ) ) else ( $("#tooltip").remove(); PrevPoint = null; ) ));

ثم قم بإضافة تلميح تحديد المواقع المطلقةوالحشو والحدود وتعيين العرض على لا شيء.

CSS #tooltip ( الموضع: مطلق؛ العرض: لا شيء؛ الحشو: 5 بكسل 10 بكسل؛ الحد: 1 بكسل صلب #e1e1e1;)

خاتمة

هذا كل شئ. لقد انتهينا من استخدام CSS3 والمكون الإضافي flot لتخصيص المخططات. حظ سعيد.