IoT Guru Cloud - Simple Chart Halimbawa: 4 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Ang IoT Guru Cloud ay nagbibigay ng isang pangkat ng mga backend na serbisyo sa pamamagitan ng REST API at maaari mong maisama ang mga REST na tawag sa iyong web page nang madali. Sa Mga Highchart, maaari mong ipakita ang mga tsart ng iyong pagsukat sa simpleng tawag sa AJAX.

Hakbang 1: Lumikha ng isang Pahina ng HTML

Kailangan mong lumikha ng isang walang laman na HTML file kasama ang iyong paboritong editor:

IoT Guru Cloud - Simpleng halimbawa ng tsart

I-save ito: simple-chart.html IoT Guru Cloud - Simpleng halimbawa ng tsart

Hakbang 2: AJAX Load ng Data ng Tsart

Kailangan mong idagdag ang JQuery at isang tawag na AJAX sa HTML file, mai-load nito ang serye ng data ng tinukoy na node at pangalan ng patlang: IoT Guru Cloud - Simpleng halimbawa ng tsart

IoT Guru Cloud - Simpleng tsart halimbawa ng pag-andar ng loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ pagsukat / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulation, dataType: "json", tagumpay: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (dokumento).siya (function () {loadData ('graphAverage', 'Average na pagkaantala ng mga tren (24 na oras)', 'Petsa at oras ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY / 288 ');}

Hakbang 3: I-set up ang Tsart

Idagdag ang Highcharts JavaScript file sa HTML file pagkatapos ng JQuery file:

Punan ang katawan ng pag-andar ng displayChart para i-set up ang tsart:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, tsart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, series: [{}]}; para sa (var i = 0; i <data.length; i ++) {options.series = {data: {}, pangalan: {}}; options.series .name = data ["pangalan"]; options.series .data = data ["data"]; } tsart ng var = mga bagong Highchart. Chart (mga pagpipilian); }

Hakbang 4: Iyon Ito! Tapos na

Tapos ka na, i-load ang iyong HTML sa iyong browser at suriin ang tsart!

Kung nais mong magpadala ng mga sukat, mangyaring bisitahin ang aming pahina ng Mga Tutorial o ang aming Community Forum!:)

Buong halimbawa: GitHub - simpleng tsart