我已按照 chartkick 安装，但图表仅显示“正在加载”

Question

我希望在我的应用程序中集成一些图表，因此我尝试使用 Chartkick。据我所知，我从这里 (https://github.com/ankane/chartkick) 开始遵循设置过程，这看起来非常简单。但在我看来，图表只显示“正在加载”。

我已经确定我已经捆绑并重新启动了 rails 并且还使用不同的模型对其进行了测试，但是从 github 页面中恢复到使用 User 模型的示例（在我的情况下我做了 3 个）。

宝石文件：

    gem 'chartkick', '~> 3.0', '>= 3.0.1'
    gem 'groupdate', '~> 4.1'

assets/javascripts/application.js：

    //= require rails-ujs
    //= require jquery
    //= require jquery_ujs
    //= require bootstrap-sprockets
    //= require Chart.bundle
    //= require chartkick
    //= require_tree .

观看次数：

    <%= line_chart User.group_by_day(:created_at).count %>

Rails s 显示 group_by_date 部分

(0.6ms)  SELECT COUNT(*) AS count_all, (DATE_TRUNC('day', ("searches"."created_at"::timestamptz) AT TIME ZONE 'Etc/UTC')) AT TIME ZONE 'Etc/UTC' AS date_trunc_day_searches_created_at_timestamptz_at_time_zone_etc FROM "searches" WHERE ("searches"."created_at" IS NOT NULL) GROUP BY (DATE_TRUNC('day', ("searches"."created_at"::timestamptz) AT TIME ZONE 'Etc/UTC')) AT TIME ZONE 'Etc/UTC'

我不确定我是否遗漏了一些非常明显的东西或者有什么干扰等，但是每当我拉起页面时，我的图表只会显示“正在加载...”。有人知道缺少的部分是什么吗？

Answer 1

对于使用 webpacker 的 rails 6，将两者都放入：

    //= require chartkick
    //= require Chart.bundle

和

    require("chartkick")
    require("chart.js")

在 application.js 中各自的位置为我工作。

此处的“快速入门”-https://chartkick.com/ 告诉您将第一个用于 rails 5 和 sprockets，将第二个用于 rails 6 和 webpacker，这很令人困惑，或者我可能只是误解了措辞。

Answer 2

把它放到你的视图文件或头中

<%= javascript_include_tag 'application' %>

瘦：

= javascript_include_tag 'application'

苗条的例子：

- content_for :html_head do
  = javascript_include_tag 'application'
- content_for :title, 'Dashboard'

Answer 3

消息是说您找不到图表 javascript。该脚本未加载。

我进行了以下配置，它工作正常。

gem 'chartkick', '~> 3.0', '>= 3.0.1'
gem 'groupdate', '~> 4.1'

在我的app/assets/javascripts/application.js

//
//
//= require rails-ujs
//= require activestorage
//= require jquery3
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .

在我看来

<%= line_chart User.group_by_day(:created_at).count %>

它正在工作，所以让我们调查一下可能是什么问题。请在您的项目根目录上运行以下命令以检查 gems

gem list Chartkick

它应该会给你以下响应

*** LOCAL GEMS ***

chartkick (3.0.2)

这意味着你已经正确安装了你的gem，否则，删除gem 'chartkick', '~> 3.0', '>= 3.0.1'并将其更改为gem 'chartkick' now runt following command

bundle install

另一件事我注意到你有不同的 jquery 你的 jquery gem 是什么？如果您使用的是gem 'jquery-rails'，那么它应该是`//= 需要jquery3，但您只提到了jquery。我认为你最好也分享你的 Gemfile。

如果您仍然遇到问题，我会建议您做一个测试项目并像我一样进行上述配置，看看它是否有效。另外，您可以在浏览器中查看 application.js 文件的内容，看看您的 jquery 是否已加载以及该插件内容是否已加载。

Answer 4

我发现在turbolinks之前必须需要chartckick和Chart.bundle。 与许多其他情况一样，turbolinks 缓存可以解决问题

//= require chartkick
//= require Chart.bundle
//= require activestorage
//= require turbolinks