如何在React中绘制方程图，例如desmos

Question

我试图绘制通过用户输入得到的方程图 就像在 desmos 中一样 (https://www.desmos.com/calculator)

前

我找到了函数图（https://mauriciopoppe.github.io/function-plot/） 但它不能用 e 绘制方程。

我想知道如何以另一种方式做到这一点。有人可以解释一下或推荐我一些想法吗？

Answer 1

您可以使用：

exp(x)

在 functionPlot 中它看起来像这样：

data: [
{
  fn: "exp(x)",
  derivative: {
    fn: "exp(x)",
    updateOnMouseMove: true
  }
}

]

要使用 ln(x) 函数，您可以使用：

log(x,exp(1))

Answer 2

您可以使用desmos-react库 https://github.com/ysulyma/desmos-react

npm install @types/desmos desmos-react

然后将此脚本文件放入head中的index.html文件中

<script src="https://www.desmos.com/api/v1.10/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>

这是你的绘图仪组件

import { GraphingCalculator } from "desmos-react";

import "./style.css";    

const Plotter = () => {
  return (
    <div>
        <GraphingCalculator
          attributes={{ className: "calculator" }}
          projectorMode
        ></GraphingCalculator>
    </div>
  );
};

export default Plotter;

不，你必须在CSS文件中设置尺寸

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.calculator {
  width: 100vw;
  height: 80vh;
}

你应该完成了。