IoT Guru Cloud - Shembull i thjeshtë i tabelës: 4 hapa

2025 Autor: John Day | [email protected]. E modifikuara e fundit: 2025-01-23 15:10

IoT Guru Cloud siguron një mori shërbimesh të pasme përmes REST API dhe ju mund t'i integroni këto thirrje REST në faqen tuaj të internetit me lehtësi. Me Highcharts, ju mund të shfaqni tabela të matjes tuaj thjesht me një telefonatë AJAX.

Hapi 1: Krijoni një faqe HTML

Ju duhet të krijoni një skedar bosh HTML me redaktorin tuaj të preferuar:

IoT Guru Cloud - Shembull i thjeshtë i tabelës

Ruajeni atë: simple -chart.html IoT Guru Cloud - Shembull i thjeshtë i tabelës

Hapi 2: Ngarkesa AJAX e të dhënave të grafikut

Ju duhet të shtoni JQuery dhe një thirrje AJAX në skedarin HTML, do të ngarkoni serinë e të dhënave të nyjës dhe emrit të fushës së specifikuar: IoT Guru Cloud - Shembull i thjeshtë i tabelës

IoT Guru Cloud - Shembull i thjeshtë i shembullit të funksionit loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ matje/ngarkimByNodeId/' + nodeId +'/' + fushë Emri +'/' + grimcim, dataType: "json", suksesi: funksioni (të dhëna) {displayChart (target, titleText, xAxisText, yAxisText, grimcim, të dhëna);}}); } funksion displayChart (target, titleText, xAxisText, yAxisText, grimcim, të dhëna) {} $ (dokument). gati (funksion () {loadData ('graphAverage', 'Vonesa mesatare e trenave (24 orë)', 'Data dhe ora ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' mesatare ',' DITA/288 ');}

Hapi 3: Vendosni tabelën

Shtoni skedarin JavaScript Highcharts në skedarin HTML pas skedarit JQuery:

Plotësoni trupin e funksionit të ekranitChart për të vendosur tabelën:

funksion displayChart (target, titleText, xAxisText, yAxisText, grimcim, të dhëna) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', titulli: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, seria: [{}]}; për (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; opsionet.series .emri = të dhënat ["emri"]; opsionet.serie .data = të dhëna ["të dhëna"]; } var chart = Highcharts të reja. Grafik (opsionet); }

Hapi 4: Kjo është ajo! U krye

Ju keni mbaruar, ngarkoni HTML -në tuaj në shfletuesin tuaj dhe kontrolloni tabelën!

Nëse doni të dërgoni matje, ju lutemi vizitoni faqen tonë të Tutorials ose Forumin tonë të Komunitetit!:)

Shembull i plotë: GitHub - tabelë e thjeshtë