Isi kandungan:
- Langkah 1: Buat Halaman HTML
- Langkah 2: Beban Data Carta AJAX
- Langkah 3: Sediakan Carta
- Langkah 4: Itu sahaja! Selesai
Video: 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
Disyorkan:
Automasi Rumah yang Dikendalikan Internet / awan Menggunakan Esp8266 (aREST, MQTT, IoT): 7 Langkah (dengan Gambar)
Automasi Rumah yang Dikendalikan Internet / awan Menggunakan Esp8266 (aREST, MQTT, IoT): SEMUA kredit kepada http://arest.io/ untuk perkhidmatan awan !! IoT subjek yang paling banyak dibincangkan di dunia sekarang !! Pelayan dan perkhidmatan awan yang menjadikannya mungkin adalah titik tarikan dunia masa kini … MENGATASI BARISAN JARAK adalah dan merupakan
Bina Sensor Kualiti Udara IoT Inhouse Tidak Perlu Awan: 10 Langkah
Bina Sensor Kualiti Udara Inhouse IoT Tidak Perlu Awan: Kualiti udara dalaman atau luaran bergantung pada banyak sumber pencemaran dan juga cuaca. Peranti ini menangkap beberapa parameter biasa dan beberapa yang paling menarik dengan menggunakan 2 cip sensor. Suhu Kelembapan TekananBahan OrganikMikro
"Robot Kit" ringkas untuk Kelab, Ruang Makmal Guru dan lain-lain: 18 Langkah
"Robot Kit" ringkas untuk Kelab, Ruang Makmal Guru dan lain-lain: Ideanya adalah untuk membina sebuah kit yang kecil namun boleh dikembangkan untuk ahli-ahli kami " Pertubuhan Seni Robotik TN Tengah ". Kami merancang bengkel di sekitar kit, terutamanya untuk pertandingan, seperti garis berikut dan perjalanan cepat. Kami telah menggabungkan Arduino
Asas IoT: Menghubungkan IoT Anda ke Awan Menggunakan OS Mongoose: 5 Langkah
Asas IoT: Menghubungkan IoT Anda ke Awan Menggunakan OS Mongoose: Sekiranya anda seorang yang suka bermain-main dan elektronik, lebih kerap daripada tidak, anda akan menemui istilah Internet of Things, yang biasanya disingkat sebagai IoT, dan bahawa ia merujuk kepada satu set peranti yang boleh menyambung ke internet! Menjadi orang seperti itu
Awan Cuaca IOT - Menggunakan OpenWeatherMaps: 11 Langkah (dengan Gambar)
Cloud Cuaca IOT - Menggunakan OpenWeatherMaps: Ini adalah awan yang tergantung dari siling bilik dan memainkan corak tertentu berdasarkan hasil yang dikembalikan dari internet. Ia mengambil data cuaca dari OpenWeatherMaps. Ia dapat dikendalikan secara manual melalui antara muka web atau automatik