تلعب المخططات الإحصائية ذات المعلومات الرقمية دورًا مهمًا على صفحات الويب على الإنترنت، بالإضافة إلى الوظيفة الأساسية لعرض الأرقام، يولي الأشخاص الآن المزيد والمزيد من الاهتمام لجمال هذه المخططات وتفاعلها. ونتيجة لذلك، يواجه المبرمجون المزيد والمزيد من التحديات الخطيرة، فالعملية التي يتخيلها معظم الناس باستخدام برامج الرسم لإنشاء الصور ثم وضعها على صفحات الويب هي عملية غير واقعية، على الرغم من أنها قد تكون جميلة المظهر، إلا أنه ليس من السهل تعديلها ، ثابت تمامًا، وعيوب مثل عدم القدرة على التحديث في الوقت الفعلي تحدد لهجة ولا يمكن استخدامها على نطاق واسع! في الوقت الحاضر، هناك العديد من لغات برمجة الشبكات المختلفة، مثل asp، php، .net... معظمها لديها وظائف رسم البرنامج النصي، ولكن الوظائف أساسية تمامًا، فهي تحتاج إلى رسم رسم بياني تلو الآخر، وتحتاج إلى حساب الإحداثيات ومعلومات أخرى إذا كنت تريد أن تكون جميلة، فالأمر صعب بعض الشيء... مكتبة فئة Jpgraph في php هي جدول أفضل، لكن جمالها الديناميكي لا يزال سيئًا...
لقد سلطت ولادة JQuery الضوء على تصميم التفاعل الديناميكي لصفحات الويب. اعتمدت العديد من مواقع الويب الناشئة لمجموعات الأزياء الشابة تقنية JQuery، وأكثرها وضوحًا هي تأثيرات التخفيف والتلاشي والتلاشي للوحدات النمطية المختلفة على الويب صفحة. أدى تطور التكنولوجيا أيضًا إلى تطور كبير في شكل عرض المخططات الإحصائية على الويب، وفيما يلي نقدم إحدى مكتبات جافا سكريبت البسيطة نسبيًا ولكنها عملية أيضًا - Highcharts (المخططات الإحصائية)، وHighstock (عرض بيانات السلاسل الزمنية)، وكلاهما عبارة عن مكتبات للرسوم البيانية. مكتوبة بلغة JavaScript خالصة، ويمكنهم إضافة مخططات تفاعلية إلى مواقع الويب أو تطبيقات الويب بسهولة ويسر، ولا يحتاجون إلى مكونات إضافية للتشغيل مثل Flash وJava، كما أنها تعمل بسرعة، وتتمتع بتوافق جيد، ويمكن أن تحقق حجمًا متكيفًا يمكن أن يدعم بشكل مثالي معظم المتصفحات الحالية، بما في ذلك متصفح IE6، الذي يسبب صداعًا للعديد من مهندسي الواجهة الأمامية. . وهو مجاني للدراسة الشخصية والموقع الشخصي والاستخدام غير التجاري. تتضمن أنواع المخططات التي يدعمها HighCharts حاليًا المخططات المنحنية، والمخططات المساحية، والمخططات الشريطية، والمخططات الدائرية، والمخططات المبعثرة، والمخططات الشاملة. يستخدم Highstock بشكل رئيسي لعرض بيانات السلاسل الزمنية.
تشمل الميزات الرئيسية لـ HighCharts ما يلي:
1. التوافق: تمت كتابة HighCharts بلغة JavaScript خالصة وهو متوافق مع معظم متصفحات اليوم، بما في ذلك iPhone وIE وFirefox وما إلى ذلك؛
2. العديد من أنواع المخططات: يدعم HighCharts الآن مجموعة متنوعة من أنواع المخططات، بما في ذلك المخططات المنحنية، والمخططات المساحية، والمخططات الشريطية، والمخططات الدائرية، والمخططات المبعثرة، والمخططات الشاملة، وما إلى ذلك، لتلبية الاحتياجات المختلفة.
3. غير مقيدة باللغة: يمكن استخدام HighCharts في معظم عمليات تطوير الويب وهي مجانية للمستخدمين الفرديين، وهي تدعم الاستخدام بلغات متعددة مثل ASP وPHP وJAVA و.NET وما إلى ذلك.
4. وظيفة المطالبة: في المخطط الذي تم إنشاؤه بواسطة HighCharts، يمكنك تعيين التأثير الفوري الذي سيتم عرضه على نقطة البيانات، أي تحريك الماوس إلى نقطة بيانات معينة، ويمكن عرض البيانات التفصيلية للنقطة، ويمكن عرض يمكن ضبط تأثير العرض.
5. وظيفة التكبير: يمكن لـ HighCharts عرض كمية كبيرة من البيانات بطريقة مركزية، ويمكنها تكبير جزء معين من الرسم البياني لزيادة دقة المخطط وعرضه بالتفصيل، ويمكنك اختيار التكبير أفقيًا أو رأسيًا.
6. الجدول الزمني: يمكن أن يكون دقيقًا بالمللي ثانية.
مثال الرسم البياني:
للحصول على جميع أمثلة المخططات، يرجى الاطلاع على العرض التوضيحي الرسمي: http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
من السهل جدًا استدعاء هذين النوعين من مخططات مكتبة js وفقًا للنموذج الرسمي، وأدخل رمز js المطلوب وملفات js المشار إليها في الصفحة، واستخدم قيمة المعرف الفريد في منطقة طبقة div حيث يتم إدراج المخطط.
تعديلات النص على المخططات:
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}يتم تقسيم تغييرات مصدر البيانات في المخططات تقريبًا إلى ثلاث حالات:
1. أبسط طريقة هي استخدام استبدال النص مباشرة على الصفحة
series: [{
name: 'USA',
data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null , null , null ,null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]2. استدعاء ملف نصي بتنسيق معين:
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)خذ هذا كمثال. استخدم برنامج تحرير النص لفتح ملف analytics.tsv ويمكنك رؤية بنية البيانات، ما عليك سوى إنشاء بيانات جديدة واستبدالها وفقًا للبنية الأصلية.
3. في الرسوم البيانية من نوع السلاسل الزمنية Highstock، يتم استخدام استدعاء الملفات عن بعد في الغالب:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)يمكنك أيضًا فتح ملف العينة http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?,
?([ [Date.UTC(2003,8,24),0.8709], [Date.UTC(2003,8,25),0.872], [Date.UTC(2003,8,26),0.8714], [Date.UTC(2003,8,29),0.8638], [Date.UTC(2003,8,30),0.8567], [Date.UTC(2003,9,1),0.8536], [Date.UTC(2003,9,2),0.8564], [Date.UTC(2003,9,3),0.8639], [Date.UTC(2003,9,6),0.8538], [Date.UTC(2003,9,7),0.8489], [Date.UTC(2003,9,8),0.8459], [Date.UTC(2003,9,9),0.8521], [Date.UTC(2003,9,10),0.8477], …………
التقليد حسب الهيكل.
بالنسبة لأولئك الذين لديهم أساس جيد لجافا سكريبت، فإنهم لا يقتصرون على طريقة استدعاء البيانات المحددة ويمكن تعديلها بمرونة. بالنسبة للمبتدئين، ما عليك سوى التقليد وفقًا لبنية البيانات. انتبه إلى التنسيق الهيكلي لملف البيانات والعلامات الخاصة في بداية الملف ونهايته. في حالة فقدان العلامات، قد لا تتم قراءة البيانات لا يمكن عرض المخططات.
يمكن استخدام مصادر البيانات بشكل كامل استخدام لغات البرمجة النصية مثل php للقراءة من قاعدة البيانات لتحقيق التحديثات في الوقت الفعلي. وفي الوقت نفسه، بالنسبة لمشروعات العرض الأكثر تعقيدًا، يمكن أيضًا استخدام مجموعات متعددة الوحدات لدمج صفحة ويب في نظام العرض.