Question

我正在尝试在Polymer 1.0应用程序中实现Google Pie Chart对象。这就是我的自定义元素的外观：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<dom-module id="points-from-customer">
  <template>
    <style>
        :host
        {
            display: block;
        }
    </style>
    <div id="piechart" style="width: 200px; height: 200px;"></div>
  </template>
  <script>
      (function () {
          'use strict';

          Polymer({
              is: 'points-from-customer',

              properties: {
                  foo: {
                      type: String,
                      value: 'points-from-customer',
                      notify: true
                  }
              },

              ready: function () {
                  //Reference URL: https://developers.google.com/chart/interactive/docs/gallery/piechart

                  google.load("visualization", "1", { packages: ["corechart"] });
                  google.setOnLoadCallback(drawChart);

                  function drawChart() {
                      var data = google.visualization.arrayToDataTable([
                                      ['Task', 'Hours per Day'],
                                      ['Work', 11],
                                      ['Eat', 2],
                                      ['Commute', 2],
                                      ['Watch TV', 2],
                                      ['Sleep', 7]
                                ]);

                      var options = {
                          title: 'My Daily Activities'
                      };

                      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                      chart.draw(data, options);
                  }
              }
          });
      })();
  </script>
</dom-module>

当我在我的自定义元素中使用该元素时，应用程序浏览器状态栏会显示“Read google.com ...”并且没有任何反应。作为替代方案，我删除了参考

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

从我的自定义元素

并将其放到index.html。但我仍然看到相同的。

问题是：

我做错了什么，在哪里？
这与Polymer框架完全兼容吗？这可以用作网络组件。如果是，请告诉我使用bower的安装方法/语法。
传递给drawChart函数的数据看起来不像真正的JSON对象/字符串。我可以在这里传递正确的JSON格式吗？如果没有，我可以按照它显示的方式生成字符串，并使用变量将其直接传递给arrayToDatatable方法吗？

当我运行应用程序时，console向我显示了这个大错误：

Uncaught TypeError: Cannot read property 'data1449040231565' of null
-----------------------------------------------------------------------
getData	@	browser-sync-client.2.7.6.js:127
addEvent	@	browser-sync-client.2.7.6.js:127
n.init	@	browser-sync-client.2.7.6.js:127
n.init	@	browser-sync-client.2.7.6.js:127
n.init	@	browser-sync-client.2.7.6.js:127
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Socket.onevent	@	browser-sync-client.2.7.6.js:1
Socket.onpacket	@	browser-sync-client.2.7.6.js:1
(anonymous function)	@	browser-sync-client.2.7.6.js:1
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Manager.ondecoded	@	browser-sync-client.2.7.6.js:1
(anonymous function)	@	browser-sync-client.2.7.6.js:1
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Decoder.add	@	browser-sync-client.2.7.6.js:3
Manager.ondata	@	browser-sync-client.2.7.6.js:1
(anonymous function)	@	browser-sync-client.2.7.6.js:1
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Socket.onPacket	@	browser-sync-client.2.7.6.js:1
(anonymous function)	@	browser-sync-client.2.7.6.js:1
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Transport.onPacket	@	browser-sync-client.2.7.6.js:1
callback	@	browser-sync-client.2.7.6.js:2
(anonymous function)	@	browser-sync-client.2.7.6.js:2
exports.decodePayloadAsBinary	@	browser-sync-client.2.7.6.js:2
exports.decodePayload	@	browser-sync-client.2.7.6.js:2
Polling.onData	@	browser-sync-client.2.7.6.js:2
(anonymous function)	@	browser-sync-client.2.7.6.js:2
Emitter.emit	@	browser-sync-client.2.7.6.js:1
Request.onData	@	browser-sync-client.2.7.6.js:2
Request.onLoad	@	browser-sync-client.2.7.6.js:2
xhr.onreadystatechange	@	browser-sync-client.2.7.6.js:2

我不确定这是否来自Google Chart，但是当我从custom element删除代码时，上面的列表会消失并且页面加载正常。所以我认为他们可能是相关的！

提前致谢

我无法使Google饼图在Polymer 1.0自定义元素

0 个答案: