IoT Guru Cloud - مثال نمودار ساده: 4 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

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/ dimension/loadByNodeId/' + nodeId +'/' + fieldName +'/' + گرانول ، dataType: "json" ، success: function (data) {displayChart (target، titleText، xAxisText، yAxisText ، granulation، data)؛}})؛ } function displayChart (target، titleText، xAxisText، yAxisText ، دانه بندی ، داده) {} $ (سند).ready (function () {loadData ('graphAverage'، 'متوسط تأخیر قطارها (24 ساعته)' ، 'تاریخ و زمان '،' min '،' ef39d670-70d9-11e9-be02-27e5a8e884a7 '،' average '،' DAY/288 ')؛}

مرحله 3: تنظیم نمودار

بعد از فایل JQuery فایل جاوا اسکریپت Highcharts را به فایل HTML اضافه کنید:

بدنه تابع displayChart را برای تنظیم نمودار پر کنید:

function displayChart (target، titleText، xAxisText، yAxisText ، گرانول ، داده) {var options = {title: {text: titleText} ، نمودار: {type: 'spline'، renderTo: target،}، xAxis: {type: 'datetime '، عنوان: {text: xAxisText} ، gridLineWidth: 1 ، tickInterval: 3600 * 1000} ، yAxis: {title: {text: yAxisText}} ، سری: [{}]} ؛ برای (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 (گزینه ها) ؛ }

مرحله 4: همین! انجام شده

کار شما به پایان رسیده است ، HTML خود را در مرورگر خود بارگذاری کرده و نمودار را بررسی کنید!

اگر می خواهید اندازه گیری ها را ارسال کنید ، لطفاً از صفحه آموزش های ما یا انجمن انجمن ما دیدن کنید!:)

مثال کامل: GitHub - نمودار ساده