IoT Guru Cloud - مثال على مخطط بسيط: 4 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

يوفر IoT Guru Cloud مجموعة من الخدمات الخلفية من خلال REST API ويمكنك دمج مكالمات REST هذه في صفحة الويب الخاصة بك بسهولة. باستخدام Highcharts ، يمكنك عرض مخططات القياس الخاصة بك ببساطة من خلال مكالمة AJAX.

الخطوة 1: قم بإنشاء صفحة HTML

تحتاج إلى إنشاء ملف HTML فارغ باستخدام المحرر المفضل لديك:

IoT Guru Cloud - مثال بسيط على الرسم البياني

احفظه: simple-chart.html IoT Guru Cloud - مثال بسيط على الرسم البياني

الخطوة 2: تحميل AJAX لبيانات المخطط

تحتاج إلى إضافة JQuery ومكالمة AJAX إلى ملف HTML ، وسيتم تحميل سلسلة البيانات الخاصة بالعقدة المحددة واسم الحقل: IoT Guru Cloud - مثال مخطط بسيط

IoT Guru Cloud - تحميل دالة مثال على الرسم البياني البسيط Data (target، titleText، xAxisText، yAxisText، nodeId، fieldName، granulation) {return $.ajax ({type: "GET"، url: 'https://api.iotguru.cloud/ القياس / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulation، dataType: "json"، Success: function (data) {displayChart (target، titleText، xAxisText، yAxisText، granulation، data)؛}}) ؛ } function displayChart (target، titleText، xAxisText، yAxisText، granulation، data) {} $ (document). '،' min '،' ef39d670-70d9-11e9-be02-27e5a8e884a7 '،' متوسط '،' DAY / 288 ') ؛}

الخطوة 3: إعداد الرسم البياني

أضف ملف JavaScript Highcharts إلى ملف HTML بعد ملف JQuery:

املأ جسم وظيفة العرض البياني لإعداد الرسم البياني:

function displayChart (target، titleText، xAxisText، yAxisText، granulation، data) {var options = {title: {text: titleText}، chart: {type: 'spline'، renderTo: target،}، xAxis: {type: 'datetime '، title: {text: xAxisText}، gridLineWidth: 1، tickInterval: 3600 * 1000}، yAxis: {title: {text: yAxisText}}، series: [{}]}؛ لـ (var i = 0؛ i <data.length؛ i ++) {options.series = {data: {}، name: {}}؛ options.series .name = البيانات ["الاسم"] ؛ options.series .data = البيانات ["البيانات"] ؛ } var chart = New Highcharts. Chart (خيارات) ؛ }

الخطوة 4: هذا كل شيء! منتهي

لقد انتهيت ، قم بتحميل HTML الخاص بك في متصفحك وتحقق من المخطط!

إذا كنت ترغب في إرسال القياسات ، يرجى زيارة صفحة البرامج التعليمية أو منتدى المجتمع الخاص بنا!:)

مثال كامل: GitHub - مخطط بسيط