Polymer 1.0 有现成的图表元素吗?
Polymer 1.0 Is there any ready made chart element?
我想在我的 Polymer 1.0 应用程序中添加一个饼图。我在 Polymer 0.5 中使用了 chart-elements
,但是当迁移到 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
的所有引用以检查这是否是负责任的。但是还是会出现。
我做错了什么?请帮忙!
这会导致错误:
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
因为Polymer只识别rows='[[...]]'
,认为是数据绑定。两个空格应该可以解决问题:
rows='[ ["Jan", 31],["Feb", 28],["Mar", 31] ]'
我想在我的 Polymer 1.0 应用程序中添加一个饼图。我在 Polymer 0.5 中使用了 chart-elements
,但是当迁移到 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
的所有引用以检查这是否是负责任的。但是还是会出现。
我做错了什么?请帮忙!
这会导致错误:
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
因为Polymer只识别rows='[[...]]'
,认为是数据绑定。两个空格应该可以解决问题:
rows='[ ["Jan", 31],["Feb", 28],["Mar", 31] ]'