Rails 4：单击 link 时不显示 Morris.js 图表

Question

我有一个显示 Morris.js 图表的仪表板页面。如果我手动键入 URL 或刷新页面，图表会正确显示，但如果我从我的应用程序中单击 link 以加载仪表板，图表将不会显示。这似乎是 turbolinks.

的问题

我发现 a strategy 我相信可以让图表在 link 点击时显示，但我不知道如何实现它，因为我不太熟悉 Javascript.

dashboard.html.erb:

...
<div class="col-lg-12">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa <%= icon_name %> fa-fw"></i> <%= description %> Chart</h3>
    </div>
    <div class="panel-body">
      <%= content_tag :div, "", 
            id: 'laser_sheets_chart',
            data: {sheets_stats: result.to_json} %>
    </div>
  </div>
</div>
...

pages.coffee:

jQuery ->
    Morris.Line({
        element: 'laser_sheets_chart',
        data: $('#laser_sheets_chart').data('sheets-stats')
        xkey: 'date',
        ykeys: ['cut', 'programmed'],
        labels: ['Cut', 'Programmed'],
        xLabels: "day"
        pointSize: 3,
        hideHover: 'auto',
        resize: true,
        smooth: true
    });

Answer 1

您说得对，这是 turbolinks 的问题。您可以在仪表板页面的 link 上通过设置禁用此功能：

data-no-turbolink='true'

或使用 link_to rails 助手：

link_to('Dashboard', data: { no_turbolink: true })

Rails 4：单击 link 时不显示 Morris.js 图表

Rails 4: Morris.js chart doesn't display when link is clicked

javascript

ruby-on-rails

morris.js

turbolinks