IoT Guru Cloud - oddiy grafik misol: 4 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:25

IoT Guru Cloud REST API orqali bir qator backend xizmatlarini taqdim etadi va siz ushbu REST qo'ng'iroqlarini veb -sahifangizga osongina qo'shishingiz mumkin. Highcharts yordamida siz o'lchov jadvallarini AJAX qo'ng'irog'i orqali ko'rsatishingiz mumkin.

1 -qadam: HTML -sahifa yarating

Sevimli muharriringiz bilan bo'sh HTML faylini yaratishingiz kerak:

IoT Guru Cloud - oddiy grafik misol

Uni saqlang: simple -chart.html IoT Guru Cloud - Oddiy grafik misol

2 -qadam: AJAX grafik ma'lumotlarini yuklash

Siz HTML faylga JQuery va AJAX qo'ng'irog'ini qo'shishingiz kerak, u ko'rsatilgan tugun va maydon nomidagi ma'lumotlar seriyasini yuklaydi: IoT Guru Cloud - oddiy diagramma misoli

IoT Guru Cloud - loadData (maqsad, titleText, xAxisText, yAxisText, nodeId, fieldName, granulyatsiya) oddiy diagramma misoli {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ o'lchash/loadByNodeId/' + nodeId +'/' + fieldName +'/' + granulyatsiya, dataType: "json", muvaffaqiyat: funktsiya (ma'lumotlar) {displayChart (maqsad, sarlavhaText, xAxisText, yAxisText, granulyatsiya, ma'lumotlar);}}); } funksiyasi displayChart (maqsad, titleText, xAxisText, yAxisText, granulyatsiya, ma'lumotlar) {} $ (hujjat).ready (function () {loadData ('graphAverage', 'Poezdlarning o'rtacha kechikishi (24 soat)', 'Sana va vaqt) ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' o'rtacha ',' DAY/288 ');}

3 -qadam: jadvalni o'rnating

JQuery faylidan keyin Highcharts JavaScript faylini HTML faylga qo'shing:

Diagrammani o'rnatish uchun displayChart funktsiyasining asosiy qismini to'ldiring:

displayChart funktsiyasi (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', sarlavha: {matn: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {sarlavha: {matn: yAxisText}}, qator: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {ma'lumotlar: {}, ism: {}}; options.series .name = ma'lumotlar ["ism"]; options.series .data = ma'lumotlar ["ma'lumotlar"]; } var chart = yangi Highcharts. Chart (variantlar); }

4 -qadam: Bu shunday! Bajarildi

Siz tugatdingiz, HTML -ni brauzeringizga yuklang va jadvalni tekshiring!

Agar siz o'lchovlarni yubormoqchi bo'lsangiz, iltimos bizning darsliklar sahifamizga yoki hamjamiyat forumimizga tashrif buyuring!:)

To'liq misol: GitHub - oddiy jadval