如何用JavaScript库Propel在浏览器绘图？运行官方示例遇报错

这个警告其实是Propel在提醒你：它不知道该把绘制的图表渲染到页面的哪个位置！默认情况下，plot函数需要一个明确的DOM元素作为输出目标，你的代码里没指定这个目标，就会触发这个提示。

下面是修复后的完整代码，我会标注关键改动：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, propel!</title>
    <script src="https://unpkg.com/propel@3.3.1"></script>
</head>
<body>
    <!-- 1. 添加一个用于渲染图表的容器元素 -->
    <div id="plot-container" style="width: 800px; height: 600px;"></div>

    <script>
        const { grad, linspace, plot } = propel;
        f = x => x.tanh();
        x = linspace(-4, 4, 200);
        
        // 2. 调用plot时，最后传入配置对象指定target为容器的id
        plot(
            x, f(x),
            x, grad(f)(x),
            x, grad(grad(f))(x),
            x, grad(grad(grad(f)))(x),
            x, grad(grad(grad(grad(f))))(x), // 补全你截断的代码
            { target: 'plot-container' } // 关键：指定输出目标
        );
    </script>
</body>
</html>

关键改动说明： #

• 添加DOM容器：页面里新增了一个<div>元素，给它设置了id和基础样式，用来承载Propel绘制的图表。你可以根据需要调整宽高样式。
• 指定plot的target：在plot函数的最后一个参数，传入一个配置对象，用target属性指向刚才创建的容器id（也可以直接传入DOM元素对象，比如document.getElementById('plot-container')）。

这样修改后，Propel就知道该把图表渲染到哪里，警告会消失，你也能正常看到tanh函数及其各阶导数的曲线了。

内容的提问来源于stack exchange，提问作者topica