IoT ጉሩ ደመና - ቀላል የገበታ ምሳሌ - 4 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:31

የ IoT ጉሩ ደመና በ REST ኤፒአይ በኩል ብዙ የኋላ አገልግሎቶችን ይሰጣል እና እነዚህን REST ጥሪዎች በቀላሉ ወደ ድር ገጽዎ ማዋሃድ ይችላሉ። በከፍታ ገበታዎች አማካኝነት በቀላሉ በ AJAX ጥሪ የመለኪያዎን ገበታዎች ማሳየት ይችላሉ።

ደረጃ 1 የኤችቲኤምኤል ገጽ ይፍጠሩ

ከሚወዱት አርታዒ ጋር ባዶ የኤችቲኤምኤል ፋይል መፍጠር ያስፈልግዎታል

IoT ጉሩ ደመና - ቀላል የገበታ ምሳሌ

አስቀምጠው -ቀላል -chart.html IoT ጉሩ ደመና - ቀላል የገበታ ምሳሌ

ደረጃ 2: AJAX የገበታ ውሂብ ጭነት

ወደ ኤችቲኤምኤል ፋይል JQuery እና AJAX ጥሪ ማከል ያስፈልግዎታል ፣ እሱ የተገለጸውን የመስቀለኛ መንገድ እና የመስክ ስም ተከታታይ ውሂብ ይጭናል - IoT ጉሩ ደመና - ቀላል የገበታ ምሳሌ

IoT ጉሩ ደመና - ቀላል የገበታ ምሳሌ ተግባር ሎድ ዳታ (ዒላማ ፣ ርዕስ ጽሑፍ ፣ xAxisText ፣ yAxisText ፣ nodeId ፣ የመስክ ስም ፣ ቅንብር) {$.ajax ({አይነት ፦ «GET» ፣ url: 'https://api.iotguru.cloud/ ልኬት/ጭነትByNodeId/' + nodeId +'/' + fieldName +'/' + granulation, dataType: "json", ስኬት: ተግባር (ውሂብ) {displayCart); } የተግባር ማሳያ ቻርት (ዒላማ ፣ ርዕስ ጽሑፍ ፣ xAxisText ፣ yAxisText ፣ granulation ፣ data) {} $ (ሰነድ)። አስቀድሞ (ተግባር () {loadData ('graphAverage' ፣ 'የባቡሮች አማካይ መዘግየት (24 ሰዓታት)' ፣ 'ቀን እና ሰዓት '፣' ደቂቃ '፣' ef39d670-70d9-11e9-be02-27e5a8e884a7 '፣' አማካይ '፣' ቀን/288 ');}

ደረጃ 3 ገበታውን ያዘጋጁ

ከ JQuery ፋይል በኋላ የከፍተኛ ቻርት ጃቫስክሪፕትን ፋይል ወደ ኤችቲኤምኤል ፋይል ያክሉ

ሰንጠረ setን ለማዘጋጀት የማሳያ ካርቱን ተግባር ይሙሉ

function displayChart (ዒላማ ፣ ርዕስ ጽሑፍ ፣ xAxisText ፣ yAxisText ፣ granulation ፣ data) {var options = {title: {text: titleText} ፣ chart: {type: 'spline' ፣ renderTo: target,} ፣ xAxis: type type 'datetime '፣ ርዕስ ፦ {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 = data ["data"]; } var chart = new Highcharts. Chart (አማራጮች); }

ደረጃ 4: ያ ብቻ ነው! ተከናውኗል

ጨርሰዋል ፣ ኤችቲኤምኤልዎን በአሳሽዎ ውስጥ ይጫኑ እና ገበታውን ያረጋግጡ!

ልኬቶችን ለመላክ ከፈለጉ እባክዎን የእኛን የማጠናከሪያ ትምህርት ገጽ ወይም የእኛን የማህበረሰብ መድረክ ይጎብኙ!:)

ሙሉ ምሳሌ GitHub - ቀላል ገበታ