jquery - 分页/Zurb Foundation 导致 Morris.js 图表渲染问题

Question

我有一个 Rails 4 应用程序，其中使用 Morris.js 进行分页图表。在添加 Zurb Foundation 之前，一切都运行良好。然而，添加 Foundation 后，我的图表发生了奇怪的事情。

场景:

加载带有分页图表的 URL 后，会呈现多个包含图表元素的 SVG，这些 SVG 会在页面中向下层叠。如果我重新加载页面，图表将正确显示，并且仅存在一个 SVG。如果我随后单击另一个分页链接，则会再次级联 SVG，直到重新加载。冲洗并重复。

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

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

application.js( list )

//= 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 gem，你难道不知道吗，我的图表运行正常。虽然我需要做一些后续工作才能更好地理解这一点，但这解决了我的问题。