Question

我目前正尝试使用以下Javascript代码从Chartist.js重新创建示例折线图代码，并转换为GWT JSNI原生方法。当我尝试执行JSNI方法时，输出返回意外的结果，如第一个屏幕截图所示。但是，当我尝试在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中），您需要$wnd的{{1}}前缀，而不是您的本地变量Chartist }和data：

options

编辑：好的，我想我弄明白了。有一个＆＃34; bug＆＃34;在Chartist中阻止它理解您的数据（https://github.com/gionkunz/chartist-js/blob/master/dist/chartist.js#L460）：

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);
}-*/;

这行JS检查你的系列值是否是一个数组，但不是你想象的方式 - 与Java不同，它不会检查引用是否指向一个数组，但是如果创建该对象的构造函数与} else if(value instanceof Array) {是同一个对象 - 在您的情况下，它们不相同 - 数组并不总是数组。在GWT中，这是因为所有GWT代码都在iframe中运行，以避免意外干扰页面自己的JS。

库应该使用Array进行检查，但是除此之外，您可以通过Array.isArray(value)，{{1}更改创建数组的方式以使用主页的预期构造函数}，或Array.from。以下是使用Array.of：

进行此操作的简单示例

new Array

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

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本机方法

2 个答案: