我有一个使用Morris.js的带有分页图表的Rails 4应用程序。在添加Zurb Foundation之前，一切都运转正常。然而，在添加基金会之后，我的图表中发生了奇怪的事情。
情景：
在使用分页图表加载网址时，会呈现包含图表元素的多个SVG，这些SVG会在页面中向下级联。如果我重新加载页面，图表会正确显示，并且只有一个SVG。如果我然后点击另一个分页链接，再次级联SVG直到我重新加载。冲洗并重复。
我已经尝试手动修复包含图表的div的高度，但正如我所料，这没有帮助。我不一定认为这是一个调整大小的问题，但不确定是怎么回事。
感谢您的任何想法/帮助。
application.js（manifest）
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require raphael
//= require morris.min
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
morris_bar_chart.js
$(document).ready(function() {
//alert('DOM has loaded.');
new Morris.Bar({
element: 'responses_chart', // ID of the chart element
data: $('#responses_chart').data('responses'), // Chart data
xkey: 'choice_content',
ykeys: ['pip_sum'],
labels: ['Sum']
});
});
charts_presentation.html.erb
<% provide(:title, 'Presentation') %>
<div class="row">
<div class="large-10 small-centered columns">
<h2 id="page-title" class="subheader">
<%= @question_set.title %></h2>
</div>
</div>
<ol>
<% @questions.each do |question| %>
<li id="chart_box">
<h3><%= question.content %></h3>
<%= content_tag :div, "", id: "responses_chart",
data: { responses: response_chart_data_for(question) } %>
</li>
<% end %>
</ol>
<div class="pagination-centered">
<%= will_paginate %>
</div>
渲染错误（控制台日志）：
<div id="responses_chart" data-responses="[{"choice_content":"8 on a Wednesday morning","pip_sum":2},{"choice_content":"8 on a Wednesday afternoon","pip_sum":1},{"choice_content":"8 (eight)","pip_sum":1},{"choice_content":"9PM on a Tuesday","pip_sum":0}]" style="position: relative;">
<svg height="2839" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="1416" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="705" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="349" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="342" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
</div>
</li>
重新加载后正确渲染：
<div id="responses_chart" data-responses="[{"choice_content":"8 on a Wednesday morning","pip_sum":2},{"choice_content":"8 on a Wednesday afternoon","pip_sum":1},{"choice_content":"8 (eight)","pip_sum":1},{"choice_content":"9PM on a Tuesday","pip_sum":0}]" style="position: relative;">
<svg height="342" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px; top: 0.200012px;">
<div class="morris-hover morris-default-style" style="left: 46.7083px; top: 143px;">
</div>
</li>