分页/ Zurb基金会导致Morris.js图表​​渲染问题

Question

我有一个使用Morris.js分页图表的Rails 4应用程序。直到添加Zurb基金会的混合，一切工作正常。但是，在添加Foundation后，奇怪的事情发生在我的图表上。

场景：

在加载URL以分页图表，含有图表元素的多个SVGs被渲染，这级联页面向下。如果我重新加载页面，图表会正确显示，并且只有一个SVG存在。如果我然后点击另一个分页链接，再次级联SVG直到我重新加载。冲洗并重复。

我试过手动修复包含图表的div的高度，但正如我所料，这并没有帮助。我不一定认为这是一个调整大小的问题，但不确定发生了什么事情。

感谢您的任何想法/帮助。

的application.js（清单）

//= 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> 

Answer 1

我想我会尝试删除jQuery-turbolinks宝石，和你不知道，我的图表正常运作。虽然我需要做一些跟进以更好地理解这一点，但这解决了我的问题。