Блог

Главная - Вопросы по программированию - Построение математической функции с помощью Plotly js, изменяющей один параметр с помощью ползунка

Построение математической функции с помощью Plotly js, изменяющей один параметр с помощью ползунка

#plotly.js

#plotly.js

Вопрос:

Я хотел бы построить параметризованную функцию с plotly.js (например, $ f (x) = sin (2 * pi * x / lambda) $, где lambda — настраиваемый параметр) и иметь возможность видеть, как эта функция развивается, когда параметр изменяется пользователем с помощьюползунок.

Кажется, что с plotly.js Я должен быть в состоянии это сделать. Но я не смог найти в Интернете пример, близкий к тому, что я хочу.

Вот мое решение. Пожалуйста, дайте мне знать, если есть лучший способ сделать это.

 let lambda = document.getElementById("lambdaSlider").value;
let n = 500;
let pi = Math.PI
let x = [], y = [];
let ampl = 1;
let xmax = 2;

// initialization
for (i = 0; i < n; i  ) {
    x[i] = xmax * i / (n-1) ;
    y[i] = ampl * Math.sin(2 * pi * x[i] / lambda);
}

let trace_init = {
  x: x,
  y: y,
  mode: 'lines'
}

let data = [trace_init]

let layout = {
  title: '',
  xaxis: {
  range: [0, xmax],
  showaxis: false,
    title: '',
    showgrid: false,
    zeroline: false,
  showline: false,
    showticklabels: false
  },
  yaxis: {
  range: [-1.1, 1.1],
    title: '',
    showgrid: false,
    zeroline: false,
  showline: false,
    showticklabels: false
  }
};

Plotly.newPlot('plot',data,layout)

function update(){
  let lambda = document.getElementById("lambdaSlider").value;
  for (i = 0; i < n; i  ) {
    x[i] = xmax * i / (n-1) ;
    y[i] = ampl * Math.sin(2 * pi * x[i] / lambda);
  }
  data = {x:x , y:y ,mode:trace_init.mode}
  
  Plotly.redraw('plot',data,layout);
  
}

// fire changes on slide input
let slide = document.getElementById('lambdaSlider');
let sliderDiv = document.getElementById("sliderAmount");

sliderDiv.innerHTML = document.getElementById('lambdaSlider').value;
//console.log(document.getElementById('lambdaSlider').value)

slide.oninput = function() {
    sliderDiv.innerHTML = this.value;
    update(this.value)
} 
 <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<!--<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">-->

<body>
    
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="plot"></div>
<p> Lambda: <span id="sliderAmount"></span></p>
<p> <input id='lambdaSlider' type="range" min ='0.1' max = '10' step = '0.05' value = '1'></input></p>

<script src="./js/plotly_funfamily.js"></script>
</body>
</html>