Rails 图表结果仅在 "Loading..." 中，但从未呈现

Question

我是初学者，我正在尝试向我的应用程序添加图表，但我只能看到 "Loading..." 而不是图表。我尝试使用 chartkick、highcharts 和 google 图表，但我的应用程序中的某些内容似乎连接错误

application.js

//= require jsapi
//= require highcharts
//= require chartkick
//= require jquery3
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .

观点

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
    </script>
  </head>
  <body>
    <%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
  </body>
</html>

布局文件

<!DOCTYPE html>
<html>
  <head>
   <%= csrf_meta_tags %>

   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

 </head>

 <body>
   <%= yield %>
 </body>
</html>

我很高兴能得到任何分数。另外，我不确定 application.js 中所需的所有 js 文件需要去哪里。 vendor/assets/javascript or app/assets/javascript?

干杯

Answer 1

将 chartkick 添加到您的应用程序的 gemfile

gem 'chartkick'

捆绑安装

在app/assets/javascripts/application.js 中，添加以下行

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

在您看来，在application.js之前添加：

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>

如果您想使用 highcharts，请将此代码 (https://code.highcharts.com/highcharts.js) 保存在 highcharts.js 中。在vendor/assets/javascripts

下添加文件

在application.js文件中，添加

//= require highcharts
//= require chartkick

有关更多信息，请查看此 link https://github.com/ankane/chartkick

Answer 2

以防万一有人需要使用更强大、更可自定义的选项：

https://github.com/railsjazz/rails_charts/

图表与 gem 捆绑在一起，不需要外部连接。此外，它不需要 jQuery.

如果您需要一些非常简单的东西 - https://github.com/railsjazz/peity_vanilla_rails

Rails 图表结果仅在 "Loading..." 中，但从未呈现

Rails chart results only in "Loading..." but never gets rendered

javascript

ruby-on-rails

google-visualization

chartkick