聚合物1.0是否有现成的图表元素? [英] Polymer 1.0 Is there any ready made chart element?
问题描述
我想在我的Polymer 1.0应用程序中添加一个饼图.我在聚合物0.5上使用了chart-elements
,但是当迁移到1.0时,它停止了工作!
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!
我还没有找到1.0版本的任何东西. 1.0完全有现成的图表元素吗?寻求专家帮助.
I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help.
提前谢谢.
编辑
根据Ben的建议,我尝试使用google-chart
组件,这就是我所做的.但是该图表未呈现.
EDIT
According to Ben's suggestion I tried with google-chart
component and this is what I did. But the chart is not rendering.
步骤1:我使用bower install --save GoogleWebComponents/google-chart
步骤2:使用yo polymer:el custom-pie-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>
第3步:在elements.html
第4步:在我的index.html中添加了custom-pie-chart
,如下所示:
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:
注意:控制台(Chrome)上也出现以下错误
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
我删除了google-chart
的所有引用,以检查是否负责.但是它仍然出现.
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!
推荐答案
这会导致错误:
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
因为Polymer只识别rows='[[...]]'
并认为它是数据绑定.两个空格应该可以解决问题:
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] ]'
这篇关于聚合物1.0是否有现成的图表元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!