IoT Guru Cloud - ตัวอย่างแผนภูมิอย่างง่าย: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

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 (เป้าหมาย, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax ({ type: "GET", url: 'https://api.iotguru.cloud/ Measurement/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulation, dataType: "json", success: function (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } ฟังก์ชั่น displayChart (เป้าหมาย, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Average delay of trains (24 hours)', 'Date and time ', 'นาที', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'เฉลี่ย', 'วัน/288'); }

ขั้นตอนที่ 3: ตั้งค่าแผนภูมิ

เพิ่มไฟล์ Highcharts JavaScript ไปยังไฟล์ HTML หลังไฟล์ JQuery:

กรอกข้อมูลในฟังก์ชัน displayChart เพื่อตั้งค่าแผนภูมิ:

ฟังก์ชัน displayChart (target, titleText, xAxisText, yAxisText, granulation, data) { var options = { title: { text: titleText }, chart: { type: 'spline', renderTo: target, }, xAxis: { type: 'datetime ', หัวข้อ: { ข้อความ: xAxisText }, gridLineWidth: 1, tickInterval: 3600 * 1000 }, yAxis: { หัวเรื่อง: { ข้อความ: yAxisText } }, ซีรี่ส์: [{}] }; สำหรับ (var i = 0; i < data.length; i++) { options.series = {data: {}, ชื่อ: {}}; options.series.name = data["name"]; options.series.data = data["data"]; } var chart = ใหม่ Highcharts. Chart (ตัวเลือก); }

ขั้นตอนที่ 4: แค่นั้นแหละ! เสร็จแล้ว

คุณทำเสร็จแล้ว โหลด HTML ของคุณในเบราว์เซอร์ และตรวจสอบแผนภูมิ!

หากคุณต้องการส่งการวัด โปรดไปที่หน้าบทช่วยสอนหรือฟอรัมชุมชนของเรา!:)

ตัวอย่างแบบเต็ม: GitHub - แผนภูมิอย่างง่าย