Question

我试图使用javascript的函数图库创建一个函数图绘图应用程序，因此它在代码中时效果很好，但是当我从html代码中添加输入并将它们链接到functionPlot（）的属性时，它实际上可以工作第一次只有函数方程式和图形颜色输入时，但是当我添加微分输入时，它不起作用，并且图形一直冻结（无法移动或缩放，并且当您将鼠标悬停在图形上时不显示微分鼠标），所以我将代码保留在此处，以便您查看并帮助我

Javascript：

var parameters = {
    target: '#myFunction',
    width: '810',
    height: '540',
    data: [{
      fn: '', 
      color: '',
      derivative: {
        fn: '',
        updateOnMouseMove: true
      }
   }],
    grid: true,
    yAxis: {domain: [-9, 9]},
    xAxis: {domain: [-7, 7]}
  };

  function plot() {
    var f = document.querySelector("#function").value;
    var color = document.querySelector("#color").value;
    var derivative = document.querySelector("#der").value;

    parameters.data[0].fn = f;
    parameters.data[0].color = color;
    parameters.data[0].derivative.fn = derivative;
    functionPlot(parameters);
  };

HTML：

    <body onload="plot();">
  <h2>Function plotter</h2>
  <div class="layer">
  <section id="plotSettings">

    <p></p>
    <label for="color">Color: </label> value: <input type=color id="color" onchange="plot();">
    <p></p>
    <label for="function">Function to plot: </label>
    <input id="function" type="text" value="" onchange="plot();">
    <p></p>
    <label for="derivative">derivative: </label> 
    <input type=text id="der", value="", onchange="plot();">
    <p></p>
    <button onclick="plot();">Plot it!</button>

  </section>

  <section id="plot">
    <div id="myFunction"></div>
  </section>
  </div>

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

希望您了解我的问题谢谢

如何修复不显示导数的功能图

0 个答案: