[英]Issue implementing sample line chart from Chartis.js using GWT JSNI native method
I'm currently trying to recreate a sample line chart code from Chartist.js using the below Javascript code and convert to GWT JSNI native method. 我目前正在尝试使用以下Javascript代码从Chartist.js重新创建示例折线图代码,并将其转换为GWT JSNI本机方法。 When I tried executing the JSNI method, the output returns unexpected result as shown in first screen shot. 当我尝试执行JSNI方法时,输出返回意外的结果,如第一个屏幕截图所示。 However when i tried to execute the Javascript code in IE's developer console, it produces the right output as shown in the last screen. 但是,当我尝试在IE开发人员控制台中执行Javascript代码时,它会产生正确的输出,如上一个屏幕所示。
What went wrong with JSNI GWT method code below? 下面的JSNI GWT方法代码出了什么问题? Thanks. 谢谢。
Javascript code 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 method 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);
}-*/;
Too many $wnd
s in your code. 您的代码中的$wnd
太多。 Only put them where you are referencing some global object, not for local variables. 仅将它们放在您引用某些全局对象的位置,而不是局部变量的位置。 When you construct the new Line
, (in the namespace Chartist
which is global), you need the $wnd
prefix for Chartist
but not for your local variables data
and options
: 当您构造新的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);
}-*/;
Edit: Okay, I think I figured it out. 编辑:好的,我想我明白了。 There is a "bug" in Chartist that prevents it from understanding your data ( https://github.com/gionkunz/chartist-js/blob/master/dist/chartist.js#L460 ): Chartist中有一个“错误”,阻止其理解您的数据( https://github.com/gionkunz/chartist-js/blob/master/dist/chartist.js#L460 ):
} else if(value instanceof Array) {
This line of JS checks if your series values is an array, but not in the way you think - unlike Java, it doesn't check to see if the reference points to an array, but if the constructor that creates that object is the same object as Array
is - and in your case, they are not the same - arrays are not always Arrays. 这行JS代码会检查您的序列值是否是数组,但不是您想的那样-与Java不同,它不会检查引用是否指向数组,但是创建该对象的构造函数是否相同对象与Array
是一样的-在您的情况下,它们并不相同-数组并不总是Arrays。 In GWT, this is specifically because all GWT code is run in an iframe to avoid accidentally interfering with the page's own JS. 在GWT中,这特别是因为所有GWT代码都在iframe中运行,以避免意外干扰页面自己的JS。
The library should be checking with Array.isArray(value)
, but in lieu of that, you can change how you create the array to use the expected constructor for the main page, via Array.from
, Array.of
, or new Array
. 该库应该使用Array.isArray(value)
进行检查,但是,您可以通过Array.from
, Array.of
或new Array
更改创建数组的方式以将期望的构造函数用于主页。 Here's a quick example of doing it with Array.of
: 这是使用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);
}-*/;
It is possible that the same sort of problem will happen in the literal object creation too, but I'd need a full working sample or more error messages to verify this... 文字对象创建中也可能会发生同样的问题,但是我需要完整的工作示例或更多错误消息来验证这一点。
this works for me 这对我有用
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);
}-*/;
Edit: this will also work 编辑:这也将工作
var data = $wnd.JSON.parse('{"labels" : ["Mon", "Tue", "Wed", "Thu", "Fri"],"series" : [[5, 2, 4, 2, 0]]}');
where as this does not 因为这不
var data = JSON.parse('{"labels" : ["Mon", "Tue", "Wed", "Thu", "Fri"],"series" : [[5, 2, 4, 2, 0]]}');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.