Как отобразить веб-компонент <google-chart> в Polymer

Question

Как отобразить веб-компонент <google-chart> в Polymer

ПРИМЕЧАНИЕ: ОБНОВЛЕНИЯ (включая решение) к этому вопросу в конце...

Я не могу получить <google-chart> элемент для отображения на моей странице.

Я использовал генератор полимеров Yeoman для создания проекта Polymer. Я добавил некоторые пользовательские элементы, а также импортировал и создал элементы из железа и бумаги из каталога полимеров. Я использую стандартную процедуру для этого:

bower install --save [[polymerElement]], затем
<link rel="import" href="../bower.../[[element]].html"> в elements.html,

После <google-chart> инструкции в разделе каталога веб-компонентов Google, я попытался представить их пример круговой диаграммы на моей странице. Хотя элемент не отображается правильно, в консоли нет ошибок, в содержимом страницы для элемента есть пробел, и в моем инспекторе появляется вся разметка, с двумя исключениями:

Рендеринг HTML не включает в себя атрибут "строки", который я не могу исправить.
Внутреннее содержание <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, в которой я работаю, после дальнейшего тестирования кажется, что <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>

Тем не менее, мне нужно <google-charts> компонент загружен в этом <template> блок (где все остальное содержимое).

Может кто-нибудь объяснить, почему это не будет загружаться в <template> блок?

Может кто-нибудь еще объяснить, как я могу заставить этот элемент отображать, где я хочу в приложении?

Спасибо всем большое заранее.

РЕШЕНИЕ:

Используя обратные вызовы регистрации и жизненного цикла, я успешно преобразовал это в шаблон с помощью следующего метода:

Сначала добавьте запрашиваемый элемент в <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()

Несмотря на небольшую задержку отображения элемента на экране, это рабочее решение.

0

google-visualization polymer web-component yeoman html-imports

Источник

user3781716 20 окт '15 в 21:09

2 ответа

Решение

Как описано здесь:

вставить пробелы в

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

вместо

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

потому что внутри шаблона [[ ]] распознается односторонняя привязка данных.

4

Источник

user88995 19 янв '16 в 08:57

Другие вопросы по тегам google-visualization polymer web-component yeoman html-imports

user4600982 21 окт '15 в 13:06 2015-10-21 13:06 · Accepted Answer · 2015-10-21 13:06

Я скопировал и вставил ваш код в один файл, и это сработало:

<!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>

Примечание: только пользовательский элемент, который вы явно используете (т.е. google-chart) должен быть импортирован как <link>,

ОБНОВИТЬ

<template> содержание никогда не отображается. Это основная цель этого типа элемента. Вам придется скопировать его содержимое в другой элемент (не template!) в основном document сделать это видимым. Другие вложенные элементы не будут отображаться больше. Пример тут.