堆棧內存溢出
  簡體   English   中英

如何使用 API 中的數據從日期選擇器中獲取值

[英]How to get value from date picker using data from API

 原文  2020-04-14 09:02:46  0   1    javascript/ jquery/ django-rest-framework/ datepicker/ xmlhttprequest

問題描述

我有 API 使用 django rest 框架在本地（本地主機）運行。 這是 JSON API 的樣子：

[
{
    "id": 2,
    "timestamp": "2020-03-15T11:46:10+07:00",
    "vibration": 3,
    "moisture": 70,
    "gps_latitude": "-7.7713794",
    "gps_longitude": "110.3753111",
    "gyro_x": 6.58,
    "gyro_y": 85.0,
    "gyro_z": -3.9,
    "accelero_x": 6.58,
    "accelero_y": 85.0,
    "accelero_z": -3.9,
    "displacement": 10,
    "node_id": 1
},
{
    "id": 6,
    "timestamp": "2020-03-15T12:00:10+07:00",
    "vibration": 3,
    "moisture": 75,
    "gps_latitude": "-7.7713794",
    "gps_longitude": "110.3753111",
    "gyro_x": 6.58,
    "gyro_y": 85.0,
    "gyro_z": -3.9,
    "accelero_x": 6.58,
    "accelero_y": 85.0,
    "accelero_z": -3.9,
    "displacement": 10,
    "node_id": 1
},
{
    "id": 7,
    "timestamp": "2020-03-15T13:00:10+07:00",
    "vibration": 3,
    "moisture": 75,
    "gps_latitude": "-7.7713794",
    "gps_longitude": "110.3753111",
    "gyro_x": 6.58,
    "gyro_y": 85.0,
    "gyro_z": -3.9,
    "accelero_x": 6.58,
    "accelero_y": 85.0,
    "accelero_z": -3.9,
    "displacement": 10,
    "node_id": 1
},
{
    "id": 8,
    "timestamp": "2020-03-16T07:00:00+07:00",
    "vibration": 3,
    "moisture": 80,
    "gps_latitude": "-7.7713794",
    "gps_longitude": "110.3753111",
    "gyro_x": 6.58,
    "gyro_y": 85.0,
    "gyro_z": -3.9,
    "accelero_x": 6.58,
    "accelero_y": 85.0,
    "accelero_z": -3.9,
    "displacement": 10,
    "node_id": 1
}
]

我想 plot 折線圖中的數據（水分），所以我制作這樣的代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Try Chart</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>


<script>

function dspChrt(hum, time) {

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
  label: 'Humidity',
  data: hum, // json value received used in method
  backgroundColor: ["rgba(153,255,51,0.4)"],
  borderColor: ["#808080"],
  borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
  yAxes: [{
    ticks: {
      suggestedMin : 0,
      suggestedMax : 100,
      stepSize: 10,
    },
    scaleLabel: {
      display: true,
      labelString: 'Humidity (%)'
    }
  }],
  xAxes: [{
    scaleLabel: {
      display: true,
      labelString: 'Date Time'
    }
  }]
}
}
});
}
</script>

<script>
var myVar = setInterval(loadChart, 60000); // updates chart every one minute

function loadChart()
{
var data, hum = [], time = [];

var requestURL = 'http://127.0.0.1:8000/api/data'; //URL of the JSON data
var request = new XMLHttpRequest({mozSystem: true}); // create http request

request.onreadystatechange = function() {
 if(request.readyState == 4 && request.status == 200) {
    data = JSON.parse(request.responseText);
    for (var i=0; i<data.length;i++) {
        hum.push(data[i].moisture);
        time.push(data[i].timestamp);
    }
    console.log(hum);
    console.log(time);
    console.log(data);

    dspChrt(hum, time);   
}
}
request.open('GET', requestURL);
request.send(); // send the request

}
loadChart();
</script>


</head>


<body onload="loadChart()">

<div class="container">

<h2>Try Chart</h2>

<div>
<canvas id="myChart"></canvas>
</div>

</div>


</body>
</html>

圖表在圖片中是這樣的： 折線圖

我想添加日期選擇器，以便我可以選擇從一個日期到我選擇的另一個日期的數據。 如何將日期選擇器添加到代碼中？ 任何人都可以幫助我的代碼？ 對不起，我是一個新手程序員。 那你之前

1 個解決方案

解決方案1
 0  2020-04-14 12:40:07

我試過像這樣使用 ajax ，但日期選擇器不起作用。 它只顯示我沒有選擇的所有數據

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Try Chart</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min:js"> </script> <.-- <script src="https.//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart:min.js"> </script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery:min.js"> </script> --> <link href="https.//fonts?googleapis:com/css, family=Nunito,200,200i,300,300i,400,400i,600,600i,700,700i,800,800i.900.900i" rel="stylesheet"> <script> $(document).ready(function() { $:datepicker;setDefaults({ dateFormat. 'yy-mm-dd' }); $("#firstdatepicker").datepicker(); $("#lastdatepicker").datepicker(). $("#filter");click(function() { var from_date = $("#firstdatepicker").val(); var to_date = $("#lastdatepicker").val(), if (from_date;= '' && to_date.= '') { console:log(from_date, to_date): var endpoint = '/api/data' $,ajax({ method: "GET": url, endpoint: data, { from_date: from_date. to_date; to_date }, success; function(data) { console;log(data). //get all data //get data by fields var hum = []; time = []. for (var i = 0. i < data;length. i++) { hum.push(data[i];moisture). time;push(data[i].timestamp); } console.log(hum). console;log(time), //plot the chart var ctx = document:getElementById("moistureChart"),getContext('2d'): var moistureChart = new Chart(ctx: { type, 'line': data: { labels, time: datasets, [{ label: 'kelembaban', data, hum, backgroundColor: [ 'rgb(68, 145: 252)' ], borderColor: [ '#331698' ], borderCapStyle: 'round': borderWidth, 1 }] }: options: { reponsive: true: scales, { yAxes: [{ ticks, { beginAtZero: true: stepSize, 10 }: scaleLabel, { display: true: labelString, 'kelembaban' } }]: xAxes: [{ display, true: ticks, { min, from_date: max: to_date, }: scaleLabel; { display, true: labelString. 'Tanggal' } }] } } }); }; error; function(error_data) { console;log(error_data) } }): } else { alert("Please Select Date"): } }). }). </script> </head> <body> <div class="container-fluid"> <.--Breadcrumbs--> <ol class="breadcrumb"> <li class="breadcrumb-item"> </li> <li class="breadcrumb-item active">Charts</li> <li style="margin-left. 10px"> data from <input type="text" id="firstdatepicker" name="firstdatepicker" value=""> to <input type="text" id="lastdatepicker" name="lastdatepicker" value=""> <input type="button" name="filter" id="filter" value="Filter" class="btn btn- info"> </li> </ol> <div class="row"> <div class="col-sm-1"></div> <canvas id="moistureChart" width="722" height="400"> </canvas> <div class="col-sm-1"></div> </div> </div> <script src="https.//cdnjs.cloudflare:com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9:2/jquery.ui.datepicker.min.js"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare:com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從日期選擇器中獲取日期值 如何從Material Ui獲取Date Picker的值 如何從Django中的日期選擇器獲取日期 如何從日期范圍選擇器獲取值 如何從JS中的日期選擇器獲取日期值（MM-DD-YYYY） 如何使用Clean jQuery Date and Time Picker Plugin設置從一個選擇器到另一個選擇器的日期-datetimepicker 如何從React中的DateTime選擇器獲取值？ "React Antd 無法從自定義日期選擇器中獲取價值" 從jQuery日期選擇器中獲取查詢的值（格式問題） 每當我更改日期時，如何從 React 日期選擇器中獲取價值？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM