使用 GWT JSNI 本机方法从 Chartis.js 发布示例折线图

Question

我目前正在尝试使用下面的 Javascript 代码从 Chartist.js 重新创建示例折线图代码并转换为 GWT JSNI 本机方法。当我尝试执行 JSNI 方法时，输出 returns 意外结果如第一个屏幕截图所示。然而，当我尝试在 IE 的开发者控制台中执行 Javascript 代码时，它会产生正确的输出，如最后一个屏幕所示。

下面的 JSNI GWT 方法代码出了什么问题？谢谢。

Javascript代码

var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[5, 2, 4, 2, 0]]};

var options = {
    width: '300px',
     height: '200px'
};

new Chartist.Line('#chartTest', data, options);

JSNI GWT 方法

public native void createChart() /*-{
        var data = {
        labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
        series: [[5, 2, 4, 2, 0]]};
        var options = {
          width: "300px",
          height: "200px"
        };
        new $wnd.Chartist.Line("#chartTest", $wnd.data, $wnd.options);
    }-*/;

JSNI GWT Native method output

Javascript code

Answer 1

您的代码中 $wnd 太多。仅将它们放在您引用某些全局对象的位置，而不是局部变量。当您构造新的 Line 时（在全局名称空间 Chartist 中），您需要 Chartist 的 $wnd 前缀，但不需要 data 的局部变量] 和 options:

public native void createChart() /*-{
    var data = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
    series: [[5, 2, 4, 2, 0]]};
    var options = {
      width: "300px",
      height: "200px"
    };
    new $wnd.Chartist.Line("#chartTest", data, options);
}-*/;

编辑：好的，我想我明白了。 Chartist 中有一个 "bug" 阻止它理解您的数据 (https://github.com/gionkunz/chartist-js/blob/master/dist/chartist.js#L460):

} else if(value instanceof Array) {

这行 JS 检查你的系列值是否是数组，但不是你想的那样 - 不像 Java，它不检查引用是否指向数组，但如果创建对象的构造函数与 Array 是同一对象 - 在您的情况下，它们不相同 - 数组并不总是数组。在 GWT 中，这是因为所有 GWT 代码都在 iframe 中运行，以避免意外干扰页面自身的 JS。

库应该使用 Array.isArray(value) 检查，但取而代之的是，您可以更改创建数组的方式，以通过 Array.from、Array.of，或 new Array。这是使用 Array.of:
进行操作的快速示例
public native void createChart() /*-{ var data = { labels: Array.of("Mon", "Tue", "Wed", "Thu", "Fri"), series: Array.of(Array.of(5, 2, 4, 2, 0)) }; var options = { width: "300px", height: "200px" }; new $wnd.Chartist.Line("#chartTest", data, options); }-*/;

同样的问题也可能发生在文字对象创建中，但我需要一个完整的工作示例或更多错误消息来验证这一点...

Answer 2

这对我有用

private static native void run (Element element) /*-{
var data = {
    labels : $wnd.Array("Mon", "Tue", "Wed", "Thu", "Fri"),
    series : $wnd.Array($wnd.Array(5, 2, 4, 2, 0))
};
var options = {
    width : "300px",
    height : "200px"
};
new $wnd.Chartist.Line(element, data, options);
}-*/;

编辑：这也行得通

var data = $wnd.JSON.parse('{"labels" : ["Mon", "Tue", "Wed", "Thu", "Fri"],"series" : [[5, 2, 4, 2, 0]]}');

哪里没有

var data = JSON.parse('{"labels" : ["Mon", "Tue", "Wed", "Thu", "Fri"],"series" : [[5, 2, 4, 2, 0]]}');

使用 GWT JSNI 本机方法从 Chartis.js 发布示例折线图

Issue implementing sample line chart from Chartis.js using GWT JSNI native method

javascript

java

gwt