Awan Guru IoT - Carta Ringkas Contoh: 4 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Awan Guru IoT menyediakan banyak perkhidmatan backend melalui REST API dan anda dapat mengintegrasikan panggilan REST ini ke laman web anda dengan mudah. Dengan Carta Tinggi, anda dapat memaparkan carta pengukuran anda hanya dengan panggilan AJAX.

Langkah 1: Buat Halaman HTML

Anda perlu membuat fail HTML kosong dengan editor kegemaran anda:

Awan Guru IoT - Contoh carta sederhana

Simpan: simple-chart.html IoT Guru Cloud - Contoh carta sederhana

Langkah 2: Beban Data Carta AJAX

Anda perlu menambahkan JQuery dan panggilan AJAX ke fail HTML, ia akan memuatkan rangkaian data nod dan nama bidang yang ditentukan: IoT Guru Cloud - Contoh carta ringkas

Awan Guru IoT - Contoh grafik fungsi ringkas loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ pengukuran / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulation, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } fungsi displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Rata-rata kelewatan kereta api (24 jam)', 'Tarikh dan waktu ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' rata-rata ',' HARI / 288 ');}

Langkah 3: Sediakan Carta

Tambahkan fail JavaScript Highcharts ke fail HTML selepas fail JQuery:

Isi badan fungsi displayChart untuk mengatur carta:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, siri: [{}}}; untuk (var i = 0; i <data.length; i ++) {options.series = {data: {}, nama: {}}; options.series .name = data ["nama"]; options.series .data = data ["data"]; } carta var = Carta Tinggi baru. Carta (pilihan); }

Langkah 4: Itu sahaja! Selesai

Anda sudah selesai, muatkan HTML anda di penyemak imbas anda dan periksa carta!

Sekiranya anda ingin menghantar ukuran, sila lawati halaman Tutorial kami atau Forum Komuniti kami!:)

Contoh penuh: GitHub - carta sederhana