google-图表未显示
google-chart not displaying
我正在尝试使用聚合物组件,但它没有显示。元素在那里。我可以在检查器中看到它,但它只是不显示。也没有没有帮助的错误消息。我试图在聚合物文档中重新创建 demo.html,但再次没有任何显示。 goole-chart 元素有问题吗?
<dom-module id="stats-page">
<style>
code {
color: #007000;
}
google-chart {
height: 300px;
width: 400px;
}
#selection-demo {
position: relative;
height: 300px;
}
#selection-chart {
float: left;
}
#selection-display {
display: inline-block;
position: relative;
top: 50%;
}
</style>
<template>
<!-- local DOM for your element -->
<section>
<h1>Stastistics Page</h1>
<p>Here's a bar chart:</p>
<google-chart
type='bar'
options='{"title": "Days in a month"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>
<!-- Pie Chart of Clicks per Category Selection -->
<h3>Clicks Per Category</h3>
<div id="category-piechart">
<google-chart type="pie"
id="selection-chart"
options='{"title": "Clicks per Category"}'
cols='[{"label": "Category", "type": "string"},{"label": "Clicks", "type": "number"}]'
rows='[["Health", 31],["Jobs", 28],["Services", 31],["Shopping", 30],["Finance", 31],["Social Media", 30]]'>
</google-chart>
</div>
<!-- End of Pie Chart of Clicks per Category Selection -->
<!-- Cicks and Logins over Time -->
<h3>Logins</h3>
<div id="clicksovertime-line">
<google-chart type='line'
options='{"title": "When do Users Login"}'
cols='[{"label": "Hour", "type": "string"},{"label": "Logins", "type": "number"}]'
rows='[["00", 1],["01", 0],["02", 00],["03", 02],["04", 04],["05", 06]]'>
</google-chart>
</div>
<!-- End of Cicks and Logins over Time -->
</section>
</template>
</dom-module>
<script>
// element registration
Polymer({
is: 'stats-page',
});
前阵子这个也抓到我了
尝试在前两个 [[
之间添加一个 space。
rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'
猜测 Polymer 一定认为它是用于绑定的。 :)
我正在尝试使用聚合物组件,但它没有显示。元素在那里。我可以在检查器中看到它,但它只是不显示。也没有没有帮助的错误消息。我试图在聚合物文档中重新创建 demo.html,但再次没有任何显示。 goole-chart 元素有问题吗?
<dom-module id="stats-page">
<style>
code {
color: #007000;
}
google-chart {
height: 300px;
width: 400px;
}
#selection-demo {
position: relative;
height: 300px;
}
#selection-chart {
float: left;
}
#selection-display {
display: inline-block;
position: relative;
top: 50%;
}
</style>
<template>
<!-- local DOM for your element -->
<section>
<h1>Stastistics Page</h1>
<p>Here's a bar chart:</p>
<google-chart
type='bar'
options='{"title": "Days in a month"}'
cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
</google-chart>
<!-- Pie Chart of Clicks per Category Selection -->
<h3>Clicks Per Category</h3>
<div id="category-piechart">
<google-chart type="pie"
id="selection-chart"
options='{"title": "Clicks per Category"}'
cols='[{"label": "Category", "type": "string"},{"label": "Clicks", "type": "number"}]'
rows='[["Health", 31],["Jobs", 28],["Services", 31],["Shopping", 30],["Finance", 31],["Social Media", 30]]'>
</google-chart>
</div>
<!-- End of Pie Chart of Clicks per Category Selection -->
<!-- Cicks and Logins over Time -->
<h3>Logins</h3>
<div id="clicksovertime-line">
<google-chart type='line'
options='{"title": "When do Users Login"}'
cols='[{"label": "Hour", "type": "string"},{"label": "Logins", "type": "number"}]'
rows='[["00", 1],["01", 0],["02", 00],["03", 02],["04", 04],["05", 06]]'>
</google-chart>
</div>
<!-- End of Cicks and Logins over Time -->
</section>
</template>
</dom-module>
<script>
// element registration
Polymer({
is: 'stats-page',
});
前阵子这个也抓到我了
尝试在前两个 [[
之间添加一个 space。
rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'
猜测 Polymer 一定认为它是用于绑定的。 :)