IoT Guru Cloud - Ví dụ về biểu đồ đơn giản: 4 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

IoT Guru Cloud cung cấp một loạt các dịch vụ phụ trợ thông qua API REST và bạn có thể tích hợp các lệnh gọi REST này vào trang web của mình một cách dễ dàng. Với Highcharts, bạn có thể hiển thị biểu đồ đo lường của mình chỉ bằng một lệnh gọi AJAX.

Bước 1: Tạo trang HTML

Bạn cần tạo một tệp HTML trống bằng trình chỉnh sửa yêu thích của mình:

IoT Guru Cloud - Ví dụ về biểu đồ đơn giản

Lưu lại: simple-chart.html IoT Guru Cloud - Ví dụ về biểu đồ đơn giản

Bước 2: AJAX tải dữ liệu biểu đồ

Bạn cần thêm JQuery và lệnh gọi AJAX vào tệp HTML, nó sẽ tải chuỗi dữ liệu của tên trường và nút được chỉ định: IoT Guru Cloud - Ví dụ về biểu đồ đơn giản

IoT Guru Cloud - Ví dụ biểu đồ đơn giản về hàm loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ Measure / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulation, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Độ trễ trung bình của các chuyến tàu (24 giờ)', 'Ngày và giờ ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY / 288 ');}

Bước 3: Thiết lập biểu đồ

Thêm tệp Highcharts JavaScript vào tệp HTML sau tệp JQuery:

Điền vào nội dung của hàm displayChart để thiết lập biểu đồ:

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}}, series: [{}]}; 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 (tùy chọn); }

Bước 4: Đó là Nó! Xong

Bạn đã hoàn tất, hãy tải HTML của bạn trong trình duyệt của bạn và kiểm tra biểu đồ!

Nếu bạn muốn gửi số đo, vui lòng truy cập trang Hướng dẫn hoặc Diễn đàn cộng đồng của chúng tôi!:)

Ví dụ đầy đủ: GitHub - biểu đồ đơn giản