Polymer 1.0 有现成的图表元素吗？答案

【问题标题】：Polymer 1.0 Is there any ready made chart element?Polymer 1.0 有现成的图表元素吗？
【发布时间】：2015-07-31 05:07:25
【问题描述】：

我想在我的 Polymer 1.0 应用程序中添加一个饼图。我将 chart-elements 与 Polymer 0.5 一起使用，但是当迁移到 1.0 时它停止工作！

我还没有找到 1.0 的任何内容。 1.0 是否有现成的图表元素？寻求专家帮助。

提前致谢。

编辑根据 Ben 的建议，我尝试使用 google-chart 组件，这就是我所做的。但是图表没有渲染。

第 1 步：我使用 bower install --save GoogleWebComponents/google-chart 安装了 google-chart

第 2 步：使用yo polymer:el custom-pie-chart 创建一个自定义元素，如下所示：

<dom-module id="custom-pie-chart">
    <style>
        :host
        {
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            margin: 0;
            padding: 0;
            width: 400px;
            height: 300px;
        }
        #chartdiv
        {
            width: 100%;
        }
        google-chart
        {
            height: 300px;
            width: 50em;
        }
    </style>
    <template>
        <link rel="stylesheet" href="custom-pie-chart.css">
        <div id="chartdiv">
        <google-chart
            type='pie'
            options='{"title": "Distribution of days in 2001Q1"}'
            cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
            rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
        </google-chart>
        </div>
    </template>
</dom-module>
<script>
    (function () {
        Polymer({
            is: 'custom-pie-chart',
            ready: function () {

            }
        });
    })();
</script>

第 3 步：在elements.html 中添加了google-chart 和我的自定义元素custom-pie-chart 的引用

第 4 步：在我的 index.html 中添加custom-pie-chart，如下所示：

<post-card id="sales-info" title="Points from customer">
  <custom-pie-chart></custom-pie-chart>
</post-card>

但图表未呈现。区域像这样空白：

注意：我在控制台 (Chrome) 上也收到以下错误

Uncaught (in promise) TypeError: Request method 'POST' is unsupported
at TypeError (native)
at http://localhost:3000/bower_components/sw-toolbox/sw-toolbox.js:20:430

我删除了google-chart 的所有引用以检查这是否是负责任的。但它仍然出现。

我做错了什么？请帮忙！

【问题讨论】：

Polymer 1.0 中有一个 google-chart 元素。这可以找到here。 Polymer 团队的 Rob Dodson 还使用 chart.js 创建了一些图表元素，可以在 here 找到这些元素。
@Ben Thomas：请参阅编辑。我没有渲染图表。在 FF 和 Chrome 中测试。

标签： pie-chart polymer-1.0

【解决方案1】：

这会导致错误：

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

因为 Polymer 只识别 rows='[[...]]' 并认为它是数据绑定。两个空格应该可以解决问题：

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

【讨论】：

太棒了！像魅力一样工作:)