使用 function-plot.js 绘制函数图像

使用 function-plot.js 绘制函数图像

原文链接：http://blog.ccyg.studio/article/a990ef39-a99d-4b8e-a96f-34e9db046366

---

对 markdown 的支持有限，建议点击原文链接查看。

绘制图像

如图所示，这个函数图像就是由 function-plot.js 绘制出来的。其中我绘制了下面三个函数：

其中我在 的函数图像上绘制了与鼠标位置对应的切线（也就是提供了的导数）。而 是 的简单泰勒展开，可以看到两个函数在趋向于0的过程中是及其相似的，也就是所谓的等价无穷小，也就是为什么 。

具体实现

首先在页面中定义绘制的对象和引入js文件:

然后写 javascript 代码进行绘制，用jquery额外处理了浏览器窗体变化之后重绘的尺寸。

/* jshint esversion: 6 */
function plot() {
    functionPlot({
        target: "#root",
        width: $('#root').width(),
        height: $('#root').width() / 1.77,
        yAxis: {
            domain: [-1, 9]
        },
        tip: {
            renderer: function () {}
        },
        grid: true,
        data: [{
                fn: "x^2",
                derivative: {
                    fn: "2 * x",
                    updateOnMouseMove: true
                }
            },{
                fn: "sin(x)",
            },{
                fn: "x - 1/6 * x^3",
            }
        ]
    });
}

$(document).ready(function () {
    plot();
});

$(window).resize(function () {
    plot();
});

参考资料

• https://mauriciopoppe.github.io/function-plot/