IoT Guru Cloud - Жөнөкөй диаграмма мисалы: 4 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:40

IoT Guru Cloud REST API аркылуу көптөгөн backend кызматтарын сунуштайт жана сиз бул 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 +'/' + гранулдаштыруу, dataType: "json", ийгилик: функция (маалыматтар) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } displayChart функциясы (максаттуу, titleText, xAxisText, yAxisText, грануляция, маалыматтар) {} $ (документ).ready (function () {loadData ('graphAverage', 'Поезддердин орточо кечигүүсү (24 саат)', 'Күн жана убакыт) ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' орточо ',' DAY/288 ');}

3 -кадам: диаграмманы орнотуу

JQuery файлынан кийин HTML файлына Highcharts JavaScript файлын кошуңуз:

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

displayChart функциясы (максаттуу, 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: {}, name: {}}; options.series .name = data ["name"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (options); }

4 -кадам: Болду! Бүттү

Сиз бүттүңүз, HTMLиңизди браузериңизге жүктөп, диаграмманы текшериңиз!

Эгерде сиз өлчөөлөрдү жөнөткүңүз келсе, биздин Окутуу баракчабызга же Коомдоштук Форумуна баш багыңыз!:)

Толук мисал: GitHub - жөнөкөй диаграмма