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

Question

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

Unable to get property 'insertBefore' of undefined or null reference

使用以下似乎是问题根源的 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 class 的一个实例在客户端创建期间创建并添加到 VerticalPanel。

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

Canvas c 的空检查揭示了一个有效的对象，但没有父节点所以在我看来，我的 html 文档有问题使得 Canvas是最顶层的对象，或者我的项目整体存在配置问题，导致对 Canvas 创建方法的调用成为 return 构造不当的实例。

有没有办法将我创建的 Canvas 人为地隐藏一层，这样 parentNode 就不会为空（或类似的东西）？还是我漏掉了一步？

这是我页面的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>

该项目无法在 public 互联网上托管，因此需要像 Chart.js

这样的离线解决方案

我也愿意使用与 GWT 配合良好的其他离线图表包。但是，替代品必须获得开源许可或以其他方式在全球范围内免费商业分发，以符合 ITAR 出口合规性。

谢谢大家！

Answer 1

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

什么是e？传给图表的时候允许此时undefined吗？

快速浏览一下链接项目，您应该使用 new 创建 Chart，并且您应该传递 canvas Context2d 实例 ctx 而不是这个未知的 e.

也很可能由于 canvas 的工作方式，如果您的 canvas 未附加到 dom，并且您的 PieChart 将无法正常运行构造函数在调用 init 之前不会附加它。如果这是一项要求，您可能需要在小部件的附加事件关闭或调用 onAttach 之前不调用 init，但您应该了解有关如何包装此项目的更多信息。

有 GWT 兼容的图表库，包括 Lienzo、GXT 和 Highcharts。完全披露，我在 Sencha 构建 GXT 方面工作了几年，因此在那里有明显的偏好。

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

GWT Chart.js implementation throws 'unable to get property 'insertBefore' of undefined or null reference

javascript

java

gwt

html5-canvas

chart.js

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

GWT Chart.js implementation throws 'unable to get property 'insertBefore' of undefined or null reference

javascript

java

gwt

html5-canvas

chart.js

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