如何在vaadin中实现html图表？答案

【问题标题】：How to implement html chart in vaadin?如何在vaadin中实现html图表？
【发布时间】：2016-03-11 07:58:28
【问题描述】：

我在 vaadin html 文件中使用了这段代码。但是输出什么都不是。

代码参考：https://vaadin.com/charts-for-polymer

请让我知道如何在我的 vaadin 设计中更正和实施。

<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-charts/3.0.0-alpha9/vaadin-

charts.html">
</head>
<body>
<template is="dom-bind" id="app">
  <vaadin-pie-chart id="pie-with-legend">
    <title>Revenue by industry</title>
    <subtitle>2015</subtitle>
    <tooltip point-format="<b>{point.percentage:.1f}%</b>">
    </tooltip>
    <plot-options>
      <pie allow-point-select="true" show-in-legend="true"cursor="pointer">
        <data-labels enabled="true"format="{point.name}: {point.y:.1f} M€"></data-labels>
      </pie>
    </plot-options>
    <data-series name="Revenue" data="[[seriesData]]"></data-series>
  </vaadin-pie-chart>
  <my-data-source data="{{seriesData}}"></my-data-source>
</template>
<dom-module id="my-data-source">
  <script>
    Polymer({
      is: "my-data-source",
      properties: {
        data: {
          type: Array,
          notify: true,
          value: [
            ["Aerospace", 53.0],
            ["Medical", 53.6],
            ["Agriculture", 25.6],
            ["Automotive", 17.0],
            ["Consumers", 12.4],
            ["Subsidies", 1.4]]
        }
    }});
  </script>
</dom-module>
</body>
</html>

【问题讨论】：

在jsbin.com/lebuqo/edit?html,output 中似乎工作得很好？

标签： html css vaadin

【解决方案1】：

您的代码在 chrome 中完美运行，但在 Firefox 上却失败了（控制台：聚合物未定义）。

您需要做的是，将聚合物代码包装在一个检查中，例如：

addEventListener('WebComponentsReady', function() {
    Polymer({
      is: "my-data-source",
      ....

在此处查看工作示例：https://jsbin.com/tifafepefi/edit?html,output

【讨论】：