Question

我正在尝试创建一个小提琴，可以让我更改图形并输入显示在图形下方的文本。我正在使用jsxgraph库。

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Change_Equation_of_a_Graph#JavaScript_Part

以上是当您更改显示的图形中的函数时也正常工作的示例。

同样的例子我正在尝试小提琴。但它没有用。

初始代码：

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);

如何让它发挥作用？

Answer 1

这是一个特定于jsfiddle的问题。如果函数doIt的声明更改为

doIt = function (){
  //redefine function f according to the current text field value
  eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
  //change the Y attribute of the graph to the new function 
  graph.Y = function(x){ return f(x); };
  //update the graph
  graph.updateCurve();
  //update the whole board
  board.update();
};

而不是

function doIt() {
     ...
}

然后示例运行。

但我要强调的是，同时JSXGraph带有它自己的解析器 JessieCode （参见https://github.com/jsxgraph/JessieCode），它允许输入常见的数学语法而不是JavaScript语法。这意味着，用户可以只输入Math.sin(x)而不是sin(x)。此外，还有权力运算符^，即可以键入Math.pow(x,2)代替x^2。

使用 JessieCode 进行功能绘图的最小示例如下所示，请参阅https://jsfiddle.net/eLs83cs6/

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});

doPlot = function() {
    var txtraw = document.getElementById('input').value, // Read user input
        f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode
        curve;

    board.removeObject('f'); // Remove element with name f
    curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
};

doPlot();

另外一个副作用是，使用 JessieCode 解析数学语法可以防止XSS攻击，如果允许用户提供任意JavaScript代码作为输入，这将很容易实现。

更改文本框中的功能不会更改图形

1 个答案: