javascript - 使用 GWT JSNI native 方法从 Chartis.js 实现示例折线图时出现问题

Question

我目前正在尝试使用以下 Javascript 代码从 Chartist.js 重新创建示例折线图代码，并转换为 GWT JSNI native 方法。当我尝试执行 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 中)，您需要 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 中存在一个“错误”，导致其无法理解您的数据 ( 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);
}-*/;

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