来自 Dart 的 JsxGraph 使用 Dart JS 互操作

Question

我正在尝试使用 Dart js 中的绘图库 JSXGraph，但我遇到了问题。

这是有效的javascript代码

var board = JXG.JSXGraph.initBoard(
    'box',
    {
      boundingbox: [-10, 10, 2, -1],
      axis: true,
      keepaspectratio: false,
      showNavigation: false
    }
);
var graph = board.create(
    'functiongraph',
    [function(x){ return 3*x*x + 5*x + 1;}, -10, 10],
    {strokeColor: '#ffff00'}
);

你可以在 jsFiddle 上 here 试试。

我想做基本上相同的事情，但来自 dart。这是我到目前为止想出的：

JsObject jsxGraph = context['JXG']['JSXGraph'];
var board = jsxGraph.callMethod('initBoard', [
  'box',
  new JsObject.jsify({
    'boundingbox': [-10, 10, 2, -1],
    'axis': true,
    'keepaspectratio': false,
    'showNavigation': false
  })
]);
var graph = board.callMethod('create', [
  'functiongraph',
  [(x){return 3*x*x + 5*x + 1;}, -10, 10],
  new JsObject.jsify({'strokeColor': '#ffff00'})
]);

我得到了绘图区域和轴，但我无法得到实际的绘图线。相反，控制台上出现错误：Uncaught TypeError: this.Y is not a function.

有人可以指出我可能做错了什么吗？我怀疑这是回调函数的问题，但我真的不知道是什么。

Answer 1

您的代码中缺少 jsify：

JsObject jsxGraph = context['JXG']['JSXGraph'];
var board = jsxGraph.callMethod('initBoard', [
  'box',
  new JsObject.jsify({
    'boundingbox': [-10, 10, 2, -1],
    'axis': true,
    'keepaspectratio': false,
    'showNavigation': false
  })
]);
var graph = board.callMethod('create', [
  'functiongraph',
  new JsObject.jsify([(x){return 3*x*x + 5*x + 1;}, -10, 10]},
  new JsObject.jsify({'strokeColor': '#ffff00'})
]);

来自 Dart 的 JsxGraph 使用 Dart JS 互操作

JsxGraph from Dart using Dart JS interop

dart

dart-js-interop

jsxgraph