Polymer 1.0 Is there any ready made chart element?

问题:

I want to add a pie chart in my Polymer 1.0 application. I used chart-elements with Polymer 0.5, but when migrated to 1.0 it stopped working!

I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help.

Thanks in advance.

EDIT According to Ben's suggestion I tried with google-chart component and this is what I did. But the chart is not rendering.

Step 1: I installed google-chart by using bower install --save GoogleWebComponents/google-chart

Step 2: Created a custom element using yo polymer:el custom-pie-chart which looks like this:

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

Step 3: Added references of google-chart and my custom element custom-pie-chart in elements.html

Step 4: Added custom-pie-chart in my index.html as follows:

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

But chart is not rendering. Area comes blank like this:

NB: I am also getting the following error on console (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

I removed all references of google-chart to check whether this is responsible. But it still comes up.

What wrong I am doing? Please help!

回答1:

This causes the error:

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

because Polymer only recognizes rows='[[...]]' and thinks it is a data binding. Two spaces should solve the problem:

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