Question

我正在从php页面中绘制json_encoded数据的图形。此页面从数据库获取其值。绘制时，每次都会绘制php页面中的重复值。我想知道如何在图表上仅显示唯一值。每次都会在图表上打印重复值。有人可以帮忙吗？用于绘图的代码如下所示：

<!doctype html>
<html>
 
<head>
  <title>Line Chart | Test</title>
  <!--For offline ESP graphs see this tutorial https://circuits4you.com/2018/03/10/esp8266-jquery-and-ajax-web-server/ -->
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>  
  <style>
  canvas{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
 
  /* Data Table Styling */
  #dataTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
 
  #dataTable td, #dataTable th {
    border: 1px solid #ddd;
    padding: 8px;
  }
 
  #dataTable tr:nth-child(even){background-color: #f2f2f2;}
 
  #dataTable tr:hover {background-color: #ddd;}
 
  #dataTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
  </style>
</head>
<body>
    <div style="text-align:center;"><b> System</b><br>Real Time Data: Humidity, Temperature Logging with Graphs</div>
    <div class="chart-container" style="position: relative; height:350px; width:100%">
        <canvas id="Chart" width="400" height="400"></canvas>
    </div>
<div>
  <table id="dataTable">
    <tr><th>Time</th><th>Water level (ml)</th><th>Temperaure (&deg;C)</th><th>Humidity (%)</th></tr>
  </table>
</div>
<br>
<br>  
<body> 
<script type="text/javascript">
  //Graphs visit: https://www.chartjs.org
var ADCvalues = [];
var Tvalues = [];
var Hvalues = [];
var timeStamp = [];
function showGraph()
{
    var ctx = document.getElementById("Chart").getContext('2d');
    var Chart2 = new Chart(ctx, {
        type: 'line',
        data: {
            labels: timeStamp,  //Bottom Labeling
            datasets: [{
                label: "water level",
                fill: false,  //Try with true
                backgroundColor: 'rgba( 243,18, 156 , 1)', //Dot marker color
                borderColor: 'rgba( 243, 18, 156 , 1)', //Graph Line Color
                data: ADCvalues,
            },{
                label: "Temperature",
                fill: false,  //Try with true
                backgroundColor: 'rgba( 243, 156, 18 , 1)', //Dot marker color
                borderColor: 'rgba( 243, 156, 18 , 1)', //Graph Line Color
                data: Tvalues,
            },
            {
                label: "Humidity",
                fill: false,  //Try with true
                backgroundColor: 'rgba(156, 18, 243 , 1)', //Dot marker color
                borderColor: 'rgba(156, 18, 243 , 1)', //Graph Line Color
                data: Hvalues,
            }],
        },
        options: {
            title: {
                    display: true,
                    text: "Station A: near the training center"
                },
            maintainAspectRatio: false,
            elements: {
            line: {
                    tension: 0.5 //Smoothening (Curved) of data lines
                }
            },
            scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
            }
        }
    });
 
}
 
//On Page load show graphs
window.onload = function() {
  console.log(new Date().toLocaleTimeString());
};
 
//Ajax script to get ADC voltage at every 5 Seconds 
//Read This tutorial https://circuits4you.com/2018/02/04/esp8266-ajax-update-part-of-web-page-without-refreshing/
 
setInterval(function() {
  // Call a function repetatively with 5 Second interval
  getData();
}, 5000); //5000mSeconds update rate
 
 function getData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //Push the data in array
                    var time = new Date().toLocaleTimeString();
                    var txt = this.responseText;
                    var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
                    console.log(obj);
                    obj.forEach(function(element_data){
                        console.log(element_data);
                        ADCvalues.push(element_data.waterlevel);
                        Tvalues.push(element_data.temperature);
                        Hvalues.push(element_data.humidity);
                        timeStamp.push(time);
                        showGraph();
                        var table = document.getElementById("dataTable");
                        var row = table.insertRow(1); //Add after headings
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);
                        var cell4 = row.insertCell(3);
                        cell1.innerHTML = time;
                        cell2.innerHTML = element_data.waterlevel;
                        cell3.innerHTML = element_data.temperature;
                        cell4.innerHTML = element_data.humidity;
                    });
                }
            };
            xhttp.open("GET", "http://abdikani.local.school.org/json.php", true); // Works fine with me using the same json document locally - Handle readADC server on ESP8266
            xhttp.send();
        }
</script>
</body>
 
</html>

我看到了其他解决方案，但是它们并不相似。我不断从php页面读取数据，该数据也不断更新。我不确定是否知道如何将其应用于我的代码。

如何使javascript图形仅显示唯一值

0 个答案: