如何在 Polymer 中呈现 <google-chart> 网络组件

Question

注意：最后对该问题的更新（包括解决方案）...

我无法在我的页面上呈现 <google-chart> 元素。

我使用 Yeoman 的 Polymer 生成器搭建了一个 Polymer 项目的脚手架。我添加了一些自定义元素，还从 Polymer Catalog 导入并实例化了 Iron 和 Paper 元素。我正在使用标准程序来执行此操作：

bower install --save [[polymerElement]]，然后
<link rel="import" href="../bower.../[[element]].html"> 在 elements.html.

在 <google-chart> instructions in the Google Web Components catalog section 之后，我尝试在我的页面上呈现他们的示例饼图。尽管该元素未正确呈现，但控制台中没有错误，该元素的页面内容存在间隙，标记全部显示在我的检查器中，但有 2 个例外：

呈现的 HTML 不包含 "rows" 属性，我似乎无法修复。
<google-chart> 组件的内部内容相当稀疏，只有 3 个子元素：
- <iron-ajax>
- <div>
- <google-legacy-loader>

相关代码如下：

elements.html:

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<!-- 3rd Party Components -->
<link rel="import" href="../bower_components/google-apis/google-apis.html">
<link rel="import" href="../bower_components/google-apis/google-js-api.html">
<link rel="import" href="../bower_components/google-chart/google-chart.html">

<!-- etc... -->

index.html:

<section data-route="dashboard">
    <h2 class="page-title">Data Dashboard</h2>
    <p>This is the dashboard section</p>
    <p>This is a 'google-chart' object:</p>
    <google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' rows='[["Jan", 31], ["Feb", 28], ["Mar", 31]]' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'></google-chart>

    <p>You can get more info here:</p>
    <a href="https://elements.polymer-project.org/elements/google-chart">https://elements.polymer-project.org/elements/google-chart</a>
</section>
<!-- etc... -->

更新：

如 Supersharp 所述，此 <google-charts> 代码在单页环境中加载。

就在我工作的 Yeoman 脚手架 Polymer 环境中加载而言，经过进一步测试后，似乎 <google-chart> 对象将加载到主app/index.html文件只要在<template>标签中不是:

<!doctype html>
<html lang="">

<head>
    ...
    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild-->

    <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <!-- endbuild -->

    <!-- will be replaced with elements/elements.vulcanized.html -->
    <link rel="import" href="elements/elements.html">
    <!-- endreplace-->

    <!-- For shared styles, shared-styles.html import in elements.html -->
    <style is="custom-style" include="shared-styles"></style>
</head>

<body unresolved class="fullbleed layout vertical">
    <span id="browser-sync-binding"></span>

NOTE: google-chart will load here...

    <template is="dom-bind" id="app">

NOTE: google-chart WON'T load here or in any of the elements below...

        <paper-drawer-panel id="paperDrawerPanel">
            <!-- Drawer Scroll Header Panel -->
            <paper-scroll-header-panel drawer>
                <!-- Drawer Toolbar -->
                <paper-toolbar id="drawerToolbar"> ... </paper-toolbar>
                <!-- Nav Menu Section Title -->
                <paper-item class="menu-section-title"> ... </paper-item>
                <!-- Drawer Section Content -->
                <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]"> ... </paper-menu>
            </paper-scroll-header-panel>
            <!-- Main Area -->
            <paper-scroll-header-panel main condenses keep-condensed-header>
                <!-- Main Toolbar -->
                <paper-toolbar id="mainToolbar" class="tall" alt-class="medium-tall"> ... </paper-toolbar>
                <!-- Main Content -->
                <div class="content"> ... </div>
            </paper-scroll-header-panel>
        </paper-drawer-panel>
    </template>

NOTE: google-chart will load here...

    <!-- build:js scripts/app.js -->
    <script src="scripts/userData.js"></script>
    <script src="scripts/app.js"></script>
    <!-- endbuild-->
</body>
</html>

但是，我需要在 <template> 块中加载 <google-charts> 组件（所有其余内容都在其中）。

谁能解释为什么这不会加载到 <template> 块中？

任何人都可以进一步解释我如何让这个元素呈现在应用程序中我想要的任何地方吗？

提前谢谢大家。

解决方案：

使用 Registration and Lifecycle Callbacks 我已经使用以下方法在模板中成功渲染了它：

首先，在<template>元素中添加一个可查询元素作为容器：

<p>This is a 'google-chart' object:</p>
<figure id="chart-container"></figure>

其次，在 Polymer() 构造函数中，创建 <google-chart> 元素并将其作为 attached 生命周期事件的一部分附加到容器：

attached: function() {
  // create an instance with createElement:
  var chartContainer = document.querySelector('figure#chart-container');

  var pieChartAttributes = {
    'id': 'pie-chart',
    'type': 'pie',
    'options': '{"title": "Distribution of days in 2001Q1"}',
    'rows': '[["Jan", 31], ["Feb", 28], ["Mar", 31]]',
    'cols': '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]',
  };

  var pieChart = document.createElement('google-chart');

  for (var key in pieChartAttributes) {
    pieChart.setAttribute(key, pieChartAttributes[key]);
  }

  chartContainer.appendChild(pieChart);
} // end attached()

虽然屏幕上的元素呈现略有延迟，但这是一个可行的解决方案。

Answer 1

我已经将您的代码复制并粘贴到一个文件中并且有效：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="import" href="/scripts/components/google-chart/google-chart.html">
</head>
<body>
    <section data-route="dashboard">
        <h2 class="page-title">Data Dashboard</h2>
        <p>This is the dashboard section</p>
        <p>This is a 'google-chart' object:</p>
        <google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' rows='[["Jan", 31], ["Feb", 28], ["Mar", 31]]' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'></google-chart>

        <p>You can get more info here:</p>
        <a href="https://elements.polymer-project.org/elements/google-chart">https://elements.polymer-project.org/elements/google-chart</a>
    </section>
</body>
</html>

注意：只有您明确使用的自定义元素 (ie google-chart) 应作为 <link>.

导入

更新

<template> 内容永远不会呈现。这是该类型元素的主要目的。您必须将其内容复制到主 document 中的另一个元素（不是 template!）以使其可见。其他嵌套元素不会呈现更多。示例 here.

Answer 2

如所述：

在

中插入空格

'rows': '[ ["Jan", 31], ["Feb", 28], ["Mar", 31] ]',

而不是

'rows': '[["Jan", 31], ["Feb", 28], ["Mar", 31]]',

因为在模板中 [[ ]] 被识别为一种数据绑定方式。

如何在 Polymer 中呈现 <google-chart> 网络组件

How to render <google-chart> web component in Polymer

google-visualization

polymer

yeoman

web-component

html-imports