首页 > 解决方案 > 启用 turbolinks 时无法加载 reports_kit 图表

问题描述

Reports_kit 在没有 turbolinks 的情况下可以正常工作,但是一旦启用了 tubolinks,它就不会加载图表。

分类软件版本:

ruby -2.4.5
rails- 5.2
bootstrap sb-admin-2
postgresql

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require reports_kit/application
//= require bootstrap_sb_admin_base_v2
//= require font_awesome5
//= require all
//= require cable
//= require dataTables.bootstrap4.min
//= require jquery.dataTables.min
//= require jquery.easing.min
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require activestorage
//= require_tree .

app/assets/stylesheets/application.css

*= require bootstrap_sb_admin_base_v2
*= require font-awesome
*= require font_awesome5_webfont
*= require dataTables.bootstrap4.min
*= require reports_kit/application
*= require_tree .
*= require_self

config/reports_kit/reports/my_users.yml

   measure: user
   dimensions:
  - created_at

app/views/dashboard
xxxxxx <%= render_report 'my_users' %>

config/routes.rb
mount ReportsKit::Engine, at: '/'

刷新后图表正在加载,仅显示下载按钮,刷新后用户界面也不正确

刷新后

标签: ruby-on-railsturbolinks

解决方案


在将“turbolinks:load”如下添加到文件后,它现在可以工作了

vi ~/.rvm/gems/ruby-2.4.5/gems/reports_kit-0.7.1/app/assets/javascripts/reports_kit/lib/_init.js

window.ReportsKit = {};

//$(document).ready(function() {
var ready = function() {
  $('.reports_kit_report').each(function(index, el) {
    var el = $(el)
    var reportClass = el.data('report-class');
    new ReportsKit[reportClass]().render({ 'el': el });
  });
 }
//});

$(document).on('turbolinks:load', ready);

推荐阅读