Линейная прогрессия оси X для линейного графика с использованием диаграммы. js - PullRequest
Новая
       9

Линейная прогрессия оси X для линейного графика с использованием диаграммы. js

0 голосов
/ 12 апреля 2020

Я в основном работал с python, но начал получать опыт js. Я начал делать веб-приложение, которое использует диаграмму. js, но у меня возникли трудности с получением линейной регрессии оси X. Альтернативно, я собираюсь сделать большую ширину массива равным распределением меток, но я хотел бы услышать, если кто-нибудь знает умный трюк. К сожалению, Google не смог помочь мне на этот раз: (

function MainPlotFun(){

  let  L = parseFloat(document.getElementById("L_input").value);
  let  F = parseFloat(document.getElementById("F_input").value);
  let  a = parseFloat(document.getElementById("a_input").value);

  let b = L - a;
  let R1 = (F * b) / L;  
  let R2 = (F * a) / L;
  let Mmax = (F * a * b) / L;
  
  var Label_Arr = [0,a,L];
  var ShearData_Arr = [R1,-R2,-R2];
  var MomentData_Arr = [0,Mmax,0];

  //window.alert(MomentData_Arr);  
  GraphFun("ShearChart",Label_Arr,ShearData_Arr,true);
  GraphFun("MomentChart",Label_Arr,MomentData_Arr,false);

}
function GraphFun(ElementId_Str,Label_Arr,Data_Arr,Step_Bool){

  new Chart(document.getElementById(ElementId_Str), {
    type: 'line',
    data: {
      labels: Label_Arr,
      datasets: [{
        steppedLine: Step_Bool, 
        data: Data_Arr ,
        lineTension: 0,
        borderColor: "#3e95cd",
        fill: false
      }],
    },
    options: {
        title: {
        display: true,
        //text: 'Shear force',
        },
      legend: {
          display: false
        },
        scales: {
          xAxes: [{
            distribution: 'linear', 
            gridLines: {
              display: false,color: "black"},
            ticks:{
            }
        }],
          yAxes: [{gridLines: {
            color: "black",
            borderDash: [2, 5]},
            scaleLabel: {
              display: true
            }
          }],
        }
    }
  });
}

/* Alternativ loop hvis det andet pis ikke vil virke


  for (i = 0; i<11; i++) {
    Label_Arr[i] = L * (i/10);
  }

  for (i = 0; i<11; i++) {
    if (a > Label_Arr[i] ){
      ShearData_Arr[i] = R1;
    } else { 
      ShearData_Arr[i] = -R2;
    }
  }

  for (i = 0; i<11; i++) {
    if (a > Label_Arr[i] ){
      MomentData_Arr[i] = Mmax / (L)
    } else { 
      MomentData_Arr[i] = Mmax;
    }
  }
*/
.main-grid {
    display: grid;
    grid-column-start: 1;
    align-content: center;
    justify-content: center;
    grid-template-columns: repeat(9, 200px);
}

.span-full{
    grid-column: span 9;
    display: block;
    margin-left: auto;
    margin-right: auto;

}
.image-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
canvas{

    width:1000px !important;
    height:250px !important;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beam calculator</title>
    <link href="styles.css" rel='Stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script src='script.js' defer></script>
    <body onload="MainPlotFun()"> 
</head>

<body>
    <div class="main-grid">
        <h1 class="span-full"> Beam calcualtor</h1>
        <text>L</text>
        <input id="L_input" value="1000"></input>
        <select id="L_unit">
            <option value="mm">mm</option>
            <option value="m">m</option>
            <option value="cm">cm</option>
        </select>
        <text>a</text>
        <input id=a_input value="300"></input>
        <select id="a_unit">
            <option value="mm">mm</option>
            <option value="m">m</option>
            <option value="cm">cm</option>
        </select>
        <text>F</text>
        <input id=F_input value="1000"></input>
        <select id="F_unit">
            <option value="N">kN</option>
            <option value="kg">N</option>
            <option value="cm">kN</option>
        </select>
        <canvas class="span-full" id="MomentChart" style="border:1px solid"></canvas>
        <canvas class="span-full" id="ShearChart" style="border:1px solid"></canvas>

    </div>  
</body>
</html>
...