IoT Guru Cloud - қарапайым диаграмма мысалы: 4 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

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, түйіршіктеу) {return $.ajax ({type: «GET», url: 'https://api.iotguru.cloud/ өлшеу/loadByNodeId/' + nodeId +'/' + өріс атауы +'/' + түйіршіктеу, dataType: «json», сәттілік: функция (деректер) {displayChart (target, titleText, xAxisText, yAxisText, түйіршіктеу, деректер);}}); } displayChart функциясы (мақсат, titleText, xAxisText, yAxisText, түйіршіктеу, деректер) {} $ (құжат).ready (функция () {loadData ('graphAverage', 'Пойыздардың орташа кешігуі (24 сағат)', 'Күн мен уақыт) ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' орташа ',' DAY/288 ');}

3 -қадам: Диаграмманы орнатыңыз

JQuery файлынан кейін HTML файлына Highcharts JavaScript файлын қосыңыз:

Диаграмманы орнату үшін displayChart функциясының негізгі бөлігін толтырыңыз:

displayChart функциясы (target, titleText, xAxisText, yAxisText, түйіршіктеу, деректер) {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 = {data: {}, аты: {}}; options.series .name = деректер [«аты»]; options.series .data = деректер [«деректер»]; } var chart = new Highcharts. Chart (опциялар); }

4 -қадам: Міне! Орындалды

Сіз аяқтадыңыз, HTML -ді шолғышқа жүктеп, диаграмманы тексеріңіз!

Егер сіз өлшеуді жібергіңіз келсе, біздің Оқулықтар бетіне немесе Қоғамдастық форумына кіріңіз!:)

Толық мысал: GitHub - қарапайым диаграмма