IoT Guru Cloud - Энгийн диаграмын жишээ: 4 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

IoT Guru Cloud нь REST API -ээр дамжуулан олон тооны арын үйлчилгээг үзүүлдэг бөгөөд та эдгээр REST дуудлагыг вэб хуудсандаа хялбархан нэгтгэх боломжтой. Highcharts -ийн тусламжтайгаар та хэмжлийнхээ хүснэгтийг зүгээр л AJAX дуудлагаар харуулах боломжтой.

Алхам 1: HTML хуудас үүсгэх

Та дуртай редактортой хоосон HTML файл үүсгэх хэрэгтэй.

IoT Guru Cloud - Энгийн диаграмын жишээ

Үүнийг хадгалах: simple -chart.html IoT Guru Cloud - Энгийн диаграмын жишээ

Алхам 2: AJAX диаграмын өгөгдлийг ачаалах

Та HTML файлд JQuery болон AJAX дуудлага нэмэх шаардлагатай бөгөөд энэ нь заасан зангилаа болон талбарын нэрийн цуврал өгөгдлийг ачаалах болно: IoT Guru Cloud - Энгийн диаграмын жишээ

IoT Guru Cloud - Энгийн диаграмын жишээ функц loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ хэмжилт/loadByNodeId/' + nodeId +'/' + fieldName +'/' + мөхлөг, өгөгдлийнType: "json", амжилт: функц (өгөгдөл) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } функц displayChart (зорилтот, titleText, xAxisText, yAxisText, мөхлөг, өгөгдөл) {} $ (баримт бичиг).ready (function () {loadData ('graphAverage', 'Галт тэрэгний дундаж саатал (24 цаг)', 'Огноо ба цаг) ',' мин ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' дундаж ',' DAY/288 ');}

Алхам 3: Диаграмыг тохируулна уу

JQuery файлын дараа HTML файлд Highcharts JavaScript файлыг нэмнэ үү.

Диаграмыг тохируулахын тулд displayChart функцийн үндсэн хэсгийг бөглөнө үү.

displayChart функц (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, диаграм: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', гарчиг: {текст: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {гарчиг: {текст: yAxisText}}, цуврал: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {өгөгдөл: {}, нэр: {}}; options.series .name = өгөгдөл ["нэр"]; options.series .data = өгөгдөл ["өгөгдөл"]; } var chart = шинэ Highcharts. Chart (сонголтууд); }

Алхам 4: Энэ бол боллоо! Дууссан

Та дууссан, HTML -ээ хөтөч дээрээ ачаалж, диаграмыг шалгана уу!

Хэрэв та хэмжилт илгээхийг хүсч байвал манай заавар хуудас эсвэл манай олон нийтийн форумд зочилно уу!:)

Бүрэн жишээ: GitHub - энгийн диаграм