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 和链轮，第二个用于 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'现在

bundle install

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

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

Answer 4

我发现在涡轮链接之前必须需要chartckick和Chart.bundle。与许多其他情况一样，turbolink高速缓存可能会丢掉东西

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

我已经按照Chartkick的安装进行了安装，但是该图表仅显示“正在加载”

4 个答案: