使用GWT JSNI本机方法从Chartis.js发布实现样本折线图

Posted 2021-05-05

我目前正在尝试使用以下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

答案

代码中的$wnds太多了。只将它们放在引用某个全局对象的位置，而不是局部变量。当你构造新的Line时，（在全局命名空间Chartist中），你需要$wnd的Chartist前缀，而不是你的局部变量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);
}-*/;

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

另一答案

这对我有用

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]]}');