使用GWT JSNI本機方法從Chartis.js實施示例折線圖

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本機方法輸出

JavaScript代碼

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是一樣的-在您的情況下，它們並不相同-數組並不總是Arrays。 在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]]}');