Google visualization 如何渲染<；谷歌图表>；聚合物中的网络组件_Google Visualization_Polymer_Yeoman_Web Component_Html Imports

Google visualization 如何渲染<；谷歌图表>；聚合物中的网络组件

google-visualization polymer

Google visualization 如何渲染<；谷歌图表>；聚合物中的网络组件,google-visualization,polymer,yeoman,web-component,html-imports,Google Visualization,Polymer,Yeoman,Web Component,Html Imports,注意：最后更新（包括解决方案）此问题… 我无法获取要在页面上呈现的元素我用约曼的聚合物发生器搭建了一个聚合物项目。我添加了一些自定义元素，还从中导入并实例化了Iron和Paper元素。我正在使用标准程序执行此操作： bower安装--保存[[polymerement]]，然后元素.html中的按照中的，我尝试在我的页面上呈现他们的示例饼图。尽管该元素未正确呈现，但控制台中没有错误，该元素的页面内容中存在间隙，并且标记都显示在我的检查器中，但有2个例外：呈现的HTML不包含“rows”属性

注意：最后更新（包括解决方案）此问题…

我无法获取要在页面上呈现的

元素

我用约曼的聚合物发生器搭建了一个聚合物项目。我添加了一些自定义元素，还从中导入并实例化了Iron和Paper元素。我正在使用标准程序执行此操作：

bower安装--保存[[polymerement]]

，然后

元素.html

中的

按照中的，我尝试在我的页面上呈现他们的示例饼图。尽管该元素未正确呈现，但控制台中没有错误，该元素的页面内容中存在间隙，并且标记都显示在我的检查器中，但有2个例外：

呈现的HTML不包含“rows”属性，我似乎无法修复该属性

组件的内部内容非常稀疏，只有3个子元素：

以下是相关代码：

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

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

但是，我需要在

块中加载

组件（其余内容都在该块中）

有人能解释一下为什么这不会加载到

块中吗

有人能进一步解释一下我如何让这个元素在我想在应用程序中呈现的任何地方吗

提前非常感谢大家

解决方案：

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

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

使用，我已使用以下方法成功地在模板中呈现此内容：

首先，在

元素中添加一个可查询元素作为容器：

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

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

我已经将您的代码复制粘贴到一个文件中，并且成功了：

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


数据仪表板
这是仪表板部分
这是一个“谷歌图表”对象：
您可以在此处获得更多信息：

注意：只有您明确使用的自定义元素（即

googlechart

）才应作为

导入

更新

内容永远不会呈现。这是这类元素的主要用途。您必须将其内容复制到主

文档

中的另一个元素（而不是

模板

！）才能使其可见。其他嵌套元素不会渲染更多。

示例。

我已将您的代码复制粘贴到一个文件中，结果成功：

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


数据仪表板
这是仪表板部分
这是一个“谷歌图表”对象：
您可以在此处获得更多信息：

注意：只有您明确使用的自定义元素（即

googlechart

）才应作为

导入

更新

内容永远不会呈现。这是这类元素的主要用途。您必须将其内容复制到主

文档

中的另一个元素（而不是

模板

！）才能使其可见。其他嵌套元素不会渲染更多。示例。

如上所述：

插入空格

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

而不是

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

因为模板内[[]]可识别为单向数据绑定。

如前所述：

插入空格

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

而不是

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

因为在模板内[[]]可以识别为单向数据绑定。

感谢您的测试-我可以复制您的结果。图表加载到单个文件中。我已经用我学到的新信息更新了我的问题。再次非常感谢-但是，我不完全理解你的更新。让我试试：我想你是说我不能嵌套

标记——就像在中一样，我的主文档正在导入

elements.html

文件，因此我不能在该文件中指定其他导入。这将是一个嵌套导入。我在这里的困惑是，这不仅是scaffold（它到处都有工作嵌套导入）中的显式模式，而且是

bower\u组件

web组件文件中的显式模式。它们经常包含导入，我正在导入它们（比如googlecharts.html）。我在哪里搞混了？我称之为嵌套的

是

elements.html

中的链接。因为

elements.html

本身是由主文档

index.html

中的

导入的。因此，导入的

元素.html

中的

引用的每个文件都不会自动导入。谢谢-这让我得到了答案。密钥没有将其添加到块中。我已经用我的工作解决方案更新了我的问题。感谢您的测试-我可以复制您的结果。图表加载到单个文件中。我已经用我学到的新信息更新了我的问题。再次非常感谢-但是，我不完全理解你的更新。让我试试：我想你是说我不能嵌套

标记——就像在中一样，我的主文档正在导入

elements.html

bower\u组件

web组件文件中的显式模式。它们经常包含导入，我正在导入它们（比如googlecharts.html）。我在哪里搞混了？我称之为嵌套的

是

elements.html

中的链接。因为

elements.html

本身是由主文档

index.html

中的

导入的。因此，导入的

元素.html

中的

引用的每个文件都不会自动导入。谢谢-这让我得到了答案。密钥没有将其添加到块中。我已经更新了我的问题