我正在使用Polymer设计网页。核心动画页面中有一个包含卡片的部分。我有一些使用Morris.js生成图表的javascript，并将其插入上述卡片中的div。
这是问题，无论我为该div设置的宽度/高度，图表都无法正常显示。这是一个截图：显然我需要更多声誉？
link：http://i.stack.imgur.com/agI3Z.jpg
但是，如果我调整窗口大小（我启用了Morris的调整大小功能），它会正确调整大小。
http://i.stack.imgur.com/MX7Me.jpg
我尝试过使用Chart.js，但有了这个，图表根本就不会显示。我相信它不是JS的问题，因为如果我将JS复制到JSBin中，我可以使用Morris和Chart.js完美地显示图表
以下是插入morris图表的一些HTML：
<body unresolved fullbleed>
<template is="auto-binding">
<div style="height:100%;width:100%;position:absolute;">
<core-animated-pages id="selector" selected="0" transitions="hero-transition cross-fade-all cross-fade">
<section id="lighting-analysis">
<div id="headerpanel" hero-id="header" onclick="selectPage('selector', 0)" horizontal layout>
<div hero hero-id="header1" flex style="background-color:white; height:100px; margin-right:-3px;"></div>
<core-image hero hero-id="header2" src="header.png" height="100px" width="100px" sizing="cover" position="center"></core-image>
<div hero hero-id="header3" flex style="background-color:white; height:100px; margin-left:-3px"></div>
</div>
<core-animated-pages id="form1" selected="0" transitions="slide-from-right" cross-fade>
<section>
<div class="card" slide-from-right>
//blahblahblah
</div>
</section>
<section>
<div class="card" slide-from-right>
//blahblahblah
</div>
</section>
<section>
<div class="card" slide-from-right style="height: 600px;">
<div horizontal layout flex cross-fade>
<div class="nav" flex onclick="changePage('form1',0)">
<core-icon icon="arrow-back"></core-icon>PREV
</div>
<div class="nav" flex style="text-align:right;" onclick="changePage('form1',1)">
NEXT
<core-icon icon="arrow-forward"></core-icon>
</div>
</div>
<p>Maintenance and Operation Cost ($)</p>
<div id="morris-bar-chart" width="400px" height="400px"></div>
<div id="SavingsComment" style="font-size:24px; text-align: center">
</div>
</div>
</section>
</core-animated-pages>
</section>
<section id="lighting-designer">
</section>
</core-animated-pages>
</div>
如果我错过了一些明显的东西，我对这是一个很新的道歉，但我在这个阶段花了太多时间试图解决它，所以我认为现在是时候呼吁社区了哈哈。
谢谢， NAS
更新：好的，所以我以一种“丑陋”的方式解决了我自己的问题。我已经按下了启动生成图形的功能的按钮，该图形将显示在图形上。
我猜这个问题与raphael抓住div维度有关，而div没有显示，导致奇怪的大小值。我尝试了几种解决方法但却无法使用它们。
我有一种感觉，核心动画页面转换准备可能会在这种情况下帮助，但我担心我不知道如何使用它，并找到我能理解的例子证明是困难的。
如果有人对如何解决这个问题有任何想法，我会非常感激。虽然它现在“有效”，但我不得不为用户添加不必要的按钮按压这一事实让我的脑子痒痒。
更新2：所以，我不能不管它。
我添加了这个函数，当单击一个按钮转到显示图形的页面时会调用该函数，并传递该函数以生成图形。
function genGraph(func) {
$("#form1").on("core-animated-pages-transition-end", func);
}
但后来我收到了这个错误：
Uncaught TypeError: ((m.event.special[e.origType] || (intermediate value)).handle || e.handler).apply is not a function
m.event.dispatch @ jquery-1.11.2.min.js:3
m.event.add.r.handle @ jquery-1.11.2.min.js:3
utils.fire @ polymer.js:9029
Polymer.mixin.complete @ core-animated-pages.html:394
(anonymous function) @ core-animated-pages.html:407
Job.complete @ polymer.js:8636
setTimeout (async)Job.go @ polymer.js:8621
job @ polymer.js:8647
base.job @ polymer.js:9779
Polymer.mixin.transitionEnd @ core-animated-pages.html:406
events.dispatchMethod @ polymer.js:9129
events.getEventHandler @ polymer.js:10713
utils.fire @ polymer.js:9029
Polymer.complete @ core-transition-pages.html:155
我猜我没有正确使用这个事件。但这就像我得到的那样接近。
这是来自core-animated-pages.html的代码（我认为）会触发我试图用来触发我的函数的事件：
complete: function() {
if (this.animating) {
this.cancelAsync(this.animating);
this.animating = null;
}
this.transitioning.forEach(function(t) {
t.removeAttribute('animate');
});
this.transitioning = [];
this._transitionElements.forEach(function(transition) {
transition.ensureComplete(this);
}, this);
this.fire('core-animated-pages-transition-end');
},