Question

我正在尝试将Chart.js图表（http://www.chartjs.org）集成到当前的GWT项目中。我让项目识别javaScript但是当我尝试实例化Chart时，我的浏览器会抛出以下JavaScript错误：

无法获取未定义或空引用的属性“insertBefore”

使用以下似乎是问题根源的GWT代码段：

    Public class PieChart implements IsWidget
    {
        Canvas c;
        public JavaScriptObject jsChart;

        public PieChart()
        {
           c = Canvas.createIfSupported();

           if (c.getContext2d().getCanvas().getParentNode() == null)
           {
              //Debug message here
           }

           jsChart = init(c.getContext2d());
        }

        private native JavaScriptObject init(Context2d ctx)
        /*-{
              var data = [];
              return new $wnd.Chart(ctx).Pie(data);  //<-- *Explodes here*
        }-*/;

        @Override
        public Widget asWidget() { return c; }
    }

创建此PieChart类的实例，并在客户端创建期间将其添加到VerticalPanel。

null调试检查条件显示parentNode确实为null并且挖掘JavaScript会在创建Chart对象期间显示对'parentNode.insertBefore'的调用 - 所以自然会失败。

Canvas c的空检查显示一个有效的对象，但是没有parentNode，所以在我看来，我的html文档有问题，以至于Canvas是最顶层的对象，或者整个项目存在配置问题这导致对Canvas创建方法的调用返回一个构造不良的实例。

有没有办法人为地将我创建的Canvas隐藏一层，以便parentNode不会为null（或类似的东西）？或者我在某处错过了一步？

这是我的页面的HTML：

    <!doctype html>
       <html>
          <head>
             <meta http-equiv="content-type" content="text/html; charset=UTF-8">
             <link type="text/css" rel="sytlesheet" href="viewer.css">
             <title>Viewer</title>
             <script type="text/javascript" language="javascript" src="viewer/moment.js"></script>
             <script type="text/javascript" language="javascript" src="viewer/Chart.js"></script>
             <script type="text/javascript" language="javascript" src="viewer/viewer.nocache.js"></script>
          </head>

          <body>
             <noscript>
                   ...
             </noscript>
          </body>
       </html>

项目无法在公共互联网上托管，因此需要像Chart.js这样的离线解决方案

我也愿意接受与GWT配合良好的其他离线图表软件包。但是，替代方案必须作为开源许可或以其他方式在全球范围内自由分发，以满足ITAR出口合规要求。

谢谢大家！

Answer 1

    private native JavaScriptObject init(Context2d ctx)
    /*-{
          var data = [];
          return $wnd.Chart(e).Pie(data);  //<-- *Explodes here*
    }-*/;

什么是e？当你将它传递给图表时，是否允许在此时未定义？

从非常快速浏览一下链接项目，您应该使用Chart创建new，并且应该将画布Context2d实例ctx传递给它而不是未知e。

如果你的画布没有附加到dom，并且你的PieChart构造函数在调用init之前没有附加它，那么很可能由于画布如何工作而不能正常运行。如果这是一项要求，您可能不需要在窗口小部件的附加事件关闭或调用init之前调用onAttach，但您应该了解有关如何包装此项目的更多信息。

有GWT兼容的图表库，包括Lienzo，GXT和Highcharts。完全披露，我与Sencha建筑GXT合作了好几年，因此有明显的偏好。

GWT Chart.js实现抛出'无法获取未定义或空引用的属性'insertBefore'

1 个答案: