IoT Guru Cloud - მარტივი დიაგრამის მაგალითი: 4 ნაბიჯი

2025 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2025-01-23 14:50

IoT Guru Cloud გთავაზობთ რამოდენიმე სარეზერვო მომსახურებას REST API– ს საშუალებით და თქვენ შეგიძლიათ მარტივად მოახდინოთ ამ REST ზარების ინტეგრირება თქვენს ვებ გვერდზე. Highcharts– ით თქვენ შეგიძლიათ აჩვენოთ თქვენი გაზომვის სქემები უბრალოდ AJAX ზარით.

ნაბიჯი 1: შექმენით HTML გვერდი

თქვენ უნდა შექმნათ ცარიელი HTML ფაილი თქვენი საყვარელი რედაქტორით:

IoT Guru Cloud - მარტივი სქემის მაგალითი

შეინახეთ იგი: simple -chart.html IoT Guru Cloud - მარტივი დიაგრამის მაგალითი

ნაბიჯი 2: გრაფიკული მონაცემების AJAX დატვირთვა

თქვენ უნდა დაამატოთ JQuery და AJAX ზარი HTML ფაილში, ეს იქნება დატვირთული მითითებული კვანძისა და ველის სახელის მონაცემთა სერია: IoT Guru Cloud - მარტივი დიაგრამის მაგალითი

IoT Guru Cloud - მარტივი დიაგრამის მაგალითი ფუნქცია loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ გაზომვა/დატვირთვაByNodeId/' + nodeId +'/' + ველი სახელი +'/' + გრანულაცია, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } ფუნქცია displayChart (სამიზნე, titleText, xAxisText, yAxisText, გრანულაცია, მონაცემები) {} $ (დოკუმენტი). უკვე (ფუნქცია () {loadData ('graphAverage', 'საშუალო დაგვიანებული მატარებლები (24 საათი)', 'თარიღი და დრო ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' საშუალო ',' DAY/288 ');}

ნაბიჯი 3: გრაფიკის დაყენება

დაამატეთ Highcharts JavaScript ფაილი HTML ფაილს JQuery ფაილის შემდეგ:

შეავსეთ ეკრანის ფუნქციის სხეული დიაგრამის დასადგენად:

ფუნქცია displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', სათაური: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, სერია: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series . სახელი = მონაცემები ["სახელი"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (პარამეტრები); }

ნაბიჯი 4: ეს არის! Შესრულებულია

თქვენ დაასრულეთ, ჩატვირთეთ თქვენი HTML თქვენს ბრაუზერში და შეამოწმეთ სქემა!

თუ გსურთ გაზომვების გაგზავნა, ეწვიეთ ჩვენს გაკვეთილების გვერდს ან ჩვენს საზოგადოების ფორუმს!:)

სრული მაგალითი: GitHub - მარტივი სქემა