网站打印预览看起来与网站本身（画布）不同

var values = [];      // y - weight [g] used in graph
var timeStamp = [];   // x - time [ms]  used in graph
var filtered =[];

var dW = [];
var dT = [];
var flowRate = [];
var Time_s = [];
var Volume = [];
var VolumeOryginal = [];
var flowRateOryginal = [];

var valuesCSV = [];   // original values from csv, not changed enywhere
var timeStampCSV = [];// same here
var filteredCSV = [];


var sliderMAX = 0;
var a = 0;
var b = 0;

var VV = 0;
var MFR = 0;
var AFR = 0;
var VT = 0;
var FT = 0;
var MFT = 0;

//chart settings
var myChart = [];
var myConfig = {    
    type: 'line',
    data: {
        labels: timeStamp,  //Bottom Labeling
        datasets: [
            {
            label: 'Flow Rate [ml/s]',
            fill: false,  //Try with true
            backgroundColor: 'rgba( 243, 156, 18 , 1)', //Dot marker color
            borderColor: 'rgba( 243, 156, 18 , 1)', //Graph Line Color
            data: values,
            yAxisID: 'y',
            //cubicInterpolationMode: 'monotone'
            },
            {
            label: 'Volume [ml]',
            fill: false,  //Try with true
            backgroundColor: 'rgba(0, 0, 255, 1)', //Dot marker color
            borderColor: 'rgba(0, 0, 255, 1)', //Graph Line Color
            data: filtered,
            yAxisID: 'y1',
            //cubicInterpolationMode: 'monotone'
            }],
    },
    options: {
        events: [],
        responsive: true,
        maintainAspectRatio: false,
        elements: {
            line: {
                    tension: 0.5 //Smoothening (Curved) of data lines
                }
            },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                  display: true,
                  text: 'Flow Rate [ml/s]',
                  color: 'rgba( 243, 156, 18 , 1)',
                  font: {
                    //family: 'Times',
                    size: 15,
                    style: 'normal',
                    lineHeight: 1.5
                  },
                  padding: {top: 30, left: 0, right: 0, bottom: 0}
                }
             
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Volume [ml]',
                    color: 'rgba(0, 0, 255, 1)',
                    font: {
                      //family: 'Times',
                      size: 15,
                      style: 'normal',
                      lineHeight: 1.5
                    },
                    padding: {top: 30, left: 0, right: 0, bottom: 0}
                   },  
               }
            
            }
        }
    }


//On Page load show graphs
window.onload = function() {
    console.log(new Date().toLocaleTimeString());

    const d = new Date().toLocaleString();
    document.getElementById("CurrentDate").innerHTML = d;

    loadCSV();
    showGraph();//empty
    calcParam();
    


};

//show graph 
function showGraph()
{
    myChart = new Chart(document.getElementById("myChart"),myConfig);
    //myChart.defaults.global.legend.display = false;
};

//load CSV file
function loadCSV() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            parseCSV(this.responseText);
        }
    };
    xmlhttp.open("GET", "dataCSV", true);
    xmlhttp.send();

};

//extract data from CSV
function parseCSV(string) {
    var array = [];
    var lines = string.split("\n");
    var table = document.getElementById("dataTable"); //table
    
    
    for (var i = 0; i < lines.length-1; i++) {
        var data = lines[i].split(",", 3);
        var dataN = lines[i+1].split(",", 3);
        data[0] = parseFloat(data[0]);      //x time 
        data[1] = parseFloat(data[1]);      //y weight
        data[2] = parseFloat(data[2]);     //filtered signal?
        dataN[0] = parseFloat(dataN[0]);      //x time next line
        dataN[1] = parseFloat(dataN[1]);      //y weight next line
        dW[i] = dataN[1] - data[1];
        dT[i] = dataN[0] - data[0];           //Time between 2 samples (millis difference)
        
        //dopisz ostatni
        var s = lines.length - 2;
        if (i == s){
            dT[i]=dT[i-1];
            dW[i]=dW[i-1];
        }
        flowRate[i] = parseFloat(((dW[i]/dT[i])*1000).toFixed(2));  //Flow Rate [mg/s or ml/s];
        var sum = 0;
        for (var j = 0; j < i; j++) {
            sum +=dT[j];
        }
        Time_s[i]=(sum/1000).toFixed(1);
        //console.log(flowRate[i]); 
        array.push(data);
        timeStamp.push(Time_s[i]);  //x time
        values.push(flowRate[i]);     //y weight
        filtered.push(data[1]);       //y weight
        timeStampCSV.push(Time_s[i]);  //x time
        valuesCSV.push(flowRate[i]);     //y weight 
        filteredCSV.push(data[1]);       //y weight
        VolumeOryginal.push(data[1]);            //Volume
        flowRateOryginal.push(flowRate[i]);  
        //update table    
        var row = table.insertRow(-1); //Add after headings
        var cell1 = row.insertCell(0);  //sample
        var cell2 = row.insertCell(1);  //Time millis
        var cell3 = row.insertCell(2);  //weight [grams]
        var cell4 = row.insertCell(3);  //dW [grams]
        var cell5 = row.insertCell(4);  //dT [ms]
        var cell6 = row.insertCell(5);  //flow rate [ml/s]
        var cell7 = row.insertCell(6);  //Time [s]
        var cell8 = row.insertCell(7);  //signal filtered [s]
        cell1.innerHTML = i;
        cell2.innerHTML = data[0];    
        cell3.innerHTML = data[1];  
        cell4.innerHTML = data[2];
        cell5.innerHTML = parseFloat((dW[i]).toFixed(2)); 
        cell6.innerHTML = dT[i];  
        cell7.innerHTML = flowRate[i];  
        cell8.innerHTML = Time_s[i];  
    }


    sliderMAX=values.length;
    document.getElementById("lower").max = sliderMAX;
    document.getElementById("upper").max = sliderMAX;
    document.getElementById("upper").value = sliderMAX;

    //update chart
    myChart.update('none');
    return array;
    
};



//hide/show dataTable
document.getElementById("sidebar").onclick = function() {
    var x = document.getElementById("content1");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
      x.style.display = "none";
      }

    var y = document.getElementById("slide");
      if (y.style.display === "none") {
        y.style.display = "block";
      } else {
      y.style.display = "none";
      }
}




//calculation of parameters
function calcParam(){
    VV = Volume[Volume.length-1]-Volume[0];
    document.getElementById("VoidedVolume").innerHTML = VV.toFixed(2);

    MFR = Math.max(...flowRate);
    document.getElementById("MaxFlowRate").innerHTML = MFR.toFixed(2);;

    //AFR = Math.(...flowRate);
    //document.getElementById("AverageFlowRate").innerHTML = AFR;

        var sum = 0;
        for (var i = 0; i < flowRate.length-1; i++) {
            sum += flowRate[i];
        }
    AFR = sum / (flowRate.length-1);
    document.getElementById("AverageFlowRate").innerHTML = AFR.toFixed(2);;
        
    VT = timeStamp[timeStamp.length-1]-timeStamp[0];
    document.getElementById("VoidingTime").innerHTML = VT.toFixed(2);;
    
    FT = sum / (flowRate.length-1);
    document.getElementById("FlowTime").innerHTML = "N/A";

    const max = Math.max(...flowRate);
    const index = flowRate.indexOf(max);
    MFT = timeStamp[index];
    document.getElementById("TimeToMaxFlow").innerHTML = MFT;

}


//sliders
var lowerSlider = document.getElementById("lower");
var  upperSlider = document.getElementById("upper");
var lowerVal = parseInt(lowerSlider.value);
var  upperVal = parseInt(upperSlider.value);


upperSlider.oninput = function() {
   lowerVal = parseInt(lowerSlider.value);
   upperVal = parseInt(upperSlider.value);
        var valuesTEMPO=valuesCSV;
        var timeStampTEMPO=timeStampCSV;
        var VolumeTEMPO=VolumeOryginal;
        var flowRateTEMPO=flowRateOryginal;
        var filteredTEMPO=filteredCSV;

        var valuesTrimmed =  valuesTEMPO.slice(lowerVal,upperVal);          
        var timeStampTrimmed = timeStampTEMPO.slice(lowerVal,upperVal); 
        var VolumeTrimmed = VolumeTEMPO.slice(lowerVal,upperVal); 
        var flowRateTrimmed = flowRateTEMPO.slice(lowerVal,upperVal);
        var filteredTrimmed = filteredTEMPO.slice(lowerVal,upperVal);  

        values = valuesTrimmed.slice(0);
        timeStamp = timeStampTrimmed.slice(0);
        filtered = filteredTrimmed.slice(0);
        Volume = VolumeTrimmed.slice(0);
        flowRate = flowRateTrimmed.slice(0);
        calcParam();
        myChart.data.labels=[];
        myChart.data.datasets.data=[];
        myChart.data.labels=timeStamp;
        myChart.data.datasets[0].data=values;
        myChart.data.datasets[1].data=filtered;
        myChart.update('none');
 
                                    

   if (upperVal < lowerVal + 4) {
      lowerSlider.value = upperVal - 4;
      
      if (lowerVal == lowerSlider.min) {
         upperSlider.value = 4;
      }
   }
};


lowerSlider.oninput = function() {
   lowerVal = parseInt(lowerSlider.value);
   upperVal = parseInt(upperSlider.value);

        var valuesTEMPO=valuesCSV;
        var timeStampTEMPO=timeStampCSV;
        var VolumeTEMPO=VolumeOryginal;
        var flowRateTEMPO=flowRateOryginal;
        var filteredTEMPO=filteredCSV;

        var valuesTrimmed =  valuesTEMPO.slice(lowerVal,upperVal);          
        var timeStampTrimmed = timeStampTEMPO.slice(lowerVal,upperVal); 
        var VolumeTrimmed = VolumeTEMPO.slice(lowerVal,upperVal); 
        var flowRateTrimmed = flowRateTEMPO.slice(lowerVal,upperVal);
        var filteredTrimmed = filteredTEMPO.slice(lowerVal,upperVal);  

        values = valuesTrimmed.slice(0);
        timeStamp = timeStampTrimmed.slice(0);
        filtered = filteredTrimmed.slice(0);

        Volume = VolumeTrimmed.slice(0);
        flowRate = flowRateTrimmed.slice(0);
        calcParam();
        myChart.data.labels=[];
        myChart.data.datasets.data=[];
        myChart.data.labels=timeStamp;
        myChart.data.datasets[0].data=values;
        myChart.data.datasets[1].data=filtered;
        myChart.update('none');
   if (lowerVal > upperVal - 4) {
      upperSlider.value = lowerVal + 4;
      
      if (upperVal == upperSlider.max) {
         lowerSlider.value = parseInt(upperSlider.max) - 4;
      }

   }
};

:root {
  --main-radius: 5px;
  --main-padding: 5px;
}

body {
  font-family: 'Courier New', Courier, monospace;
}

.container {
  display: grid;
  height: 98vh;
  /*grid-template-columns: 1fr 1fr 1fr;*/
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 0.2fr 1.5fr 38px 1.2fr;
  grid-template-areas:
    "nav nav nav"
    "main main sidebar"
    "slide slide ."
    "content1 content1 content1";
  grid-gap: 0.2rem;
  font-weight: 900;
  font-size: 16px;
  color: #1c2221;
  text-align: center;
}

nav {
  border: 1px solid black;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding-left: var(--main-padding);
  text-align: left;
}

main {
  border: 1px solid black;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

canvas{
  width: 66%;
  height:100%;
}

#slide {
  border: 1px solid black;
  grid-area: slide;
  border-radius: var(--main-radius);
  position: relative;
 
}


#sidebar {
  border: 1px solid black;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding-left: var(--main-padding);
  padding-right: var(--main-padding);
  
}

#content1 {
  border: 1px solid black;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}


#content2 {
  border: 1px solid black;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}


a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

#dataTable {
  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: rgb(107, 104, 104);
  color: white;
}





input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}

input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;  
}

input[type=range]::-webkit-slider-thumb:hover {
background: #f7f7f7;
}

input[type=range]::-webkit-slider-thumb:active {
box-shadow: inset 0 0 3px #d38d30, 0 0 9px #d38d30;
-webkit-box-shadow: inset 0 0 3px #d38d30, 0 0 9px #d38d30;
}

input[type="range"] {
-webkit-appearance: none; 
appearance: none;
height: 2px;
background-color: #C6C6C6;
pointer-events: none;
position: absolute;
width: 96%;
top: 46%;
left: 2%;
right: 2%;
}


@media only screen and (max-width: 800px) {
  .container {
   
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 2fr 38px 1.2fr 1.2fr;
    grid-template-areas:
      "nav"
      "main"
      "slide"
      "sidebar"
      "content1";
      
  }
  input[type="range"] {

    width: 96%;
    left: 2%;
    left: 2%;


  }
}


#lower {
height: 0;
z-index: 1;
}

/* .multi-range {
min-height: 50px;
} */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">

    <title></title>
</head>
<body>
    
    
     <div class="container">
        <nav>Remarks: </nav>
  
        <main id="main">
    
          <div>
            <canvas id="myChart"></canvas>
          </div>
    
        </main>
  
        <div id="sidebar">
          <div style="display: flex; justify-content: space-between;">
            <p>Date             : </p><p id="CurrentDate">Date</p>
          </div>
          <div style="display: flex; justify-content: space-between;">
           <p>Voided Volume    : </p><p id="VoidedVolume">VV</p>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <p>Max Flow Rate    : </p><p id="MaxFlowRate">MFR</p>
          </div>    
          <div style="display: flex; justify-content: space-between;">
            <p>Average Flow Rate: </p><p id="AverageFlowRate">AFR</p>
          </div>      
          <div style="display: flex; justify-content: space-between;">
            <p>Voiding Time     : </p><p id="VoidingTime">VT</p>
          </div>    
          <div style="display: flex; justify-content: space-between;">
            <p>Flow Time        : </p><p id="FlowTime">FT</p>
          </div>  
          <div style="display: flex; justify-content: space-between;">
            <p>Time To Max Flow : </p><p id="TimeToMaxFlow">MFT</p>
          </div> 
        </div>

        <div id="slide">
          <span class="multi-range">
            <input id="lower" input type="range" min="0" max="100" value="0">
            <input id="upper" input type="range" min="0" max="100" value="100">
          </span>
        </div>

        
  
        <div id="content1">
          <table id="dataTable">
            <tr><th>Sample [No.]</th><th>Time [millis]</th><th>Weight [g]</th><th>Signal</th><th>dW [g]</th><th>dT [ms]</th><th>Flow Rate [ml/s]</th><th>Time [s]</th></tr>
          </table>
        </div>
    </div>

 
    
    <script src="script.js"></script> 
    <!--<script src="chart.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
    <!-- <script src="jsChartsLink.js"></script> -->
    
</body>
</html>