javascript - 如何使用 Javascript 显示图表

Question

我正在尝试在我的网站上显示图表。用户在输入框中输入一个函数，Javascript 库应该显示该函数的图形。当我加载当前代码时，图表不显示，并且我的浏览器提醒我 functionPlot 未定义。

我尝试将functionPlot调整为许多不同的形式，但它不起作用。我看到这段代码对网络上的其他人有效，但对我不起作用。谢谢!

<form id="antoine-input" name="antoine-input" class="form-horizontal my-form" method="POST" action="form.php">
  <p>
    <input type="text" id="eq" name="eq" value="x+10" />
  </p>
</form>
<div id="plot" style="height:650px; width:650px;"></div>

function draw() {
  try {
    functionPlot({
      target: '#plot',
      data: [{
        fn: document.getElementById('eq').value,
        sampler: 'builtIn', //Use the evaluator of math.js
        graphType: 'polyline'
      }]
    });
  } catch (err) {
    console.log(err);
    alert(err);
  }

  document.getElementById('antoine-input').onsubmit = function(event) {
    event.preventDefault();
    draw();
  };

  draw();
}

Answer 1

请务必添加 d3 和 functionPlot 库。另外，您需要将 draw 调用和事件声明放在 draw 函数之外:

function draw() {
  try {
    functionPlot({
      target: '#plot',
      data: [{
        fn: document.getElementById('eq').value,
        sampler: 'builtIn', //Use the evaluator of math.js
        graphType: 'polyline'
      }]
    });
  } catch (err) {
    console.log(err);
    alert(err);
  }
}


document.getElementById('antoine-input').onsubmit = function(event) {
  event.preventDefault();
  draw();
};
draw();

<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
<form id="antoine-input" name="antoine-input" class="form-horizontal my-form" method="POST" action="form.php">
  <p>
    <input type="text" id="eq" name="eq" value="x+10" />
  </p>
</form>

<div id="plot" style="height:650px; width:650px;"></div>