Rails 图表仅导致“正在加载...”，但从未呈现

Question

iam a beginner and iam trying to add a chart to my app but instead of the graph i can only see "Loading...".我是初学者，我正在尝试向我的应用程序添加图表，但我只能看到“正在加载...”而不是图表。 I tried it with chartkick, highcharts and google charts but something in my app seems to be wired the wrong way我尝试使用 chartkick、highcharts 和 google 图表，但我的应用程序中的某些内容似乎连接错误

application.js应用程序.js

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

the view风景

<!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>

layoutfile布局文件

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

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

 </head>

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

Id be very glad for any points.我很高兴任何点。 Also, I am not sure where all the js files that are required in the application.js need to go.另外，我不确定application.js中所需的所有 js 文件都需要去哪里。 vendor/assets/javascript or app/assets/javascript ? vendor/assets/javascript or app/assets/javascript ？

Cheers干杯

Answer 1

Add chartkick to your application's gemfile将 chartkick 添加到应用程序的 gemfile

gem 'chartkick'

bundle install捆绑安装

inside app/assets/javascripts/application.js, add the following lines在 app/assets/javascripts/application.js 中，添加以下行

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

In your views, before application.js, add:在您看来，在 application.js 之前，添加：

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

Incase you want to use highcharts, save this code( https://code.highcharts.com/highcharts.js ) in highcharts.js.如果您想使用 highcharts，请将此代码（ https://code.highcharts.com/highcharts.js ）保存在 highcharts.js 中。 Add the file under vendor/assets/javascripts在 vendor/assets/javascripts 下添加文件

In the application.js file, add在 application.js 文件中，添加

//= require highcharts
//= require chartkick

For further information, check this link https://github.com/ankane/chartkick有关更多信息，请查看此链接https://github.com/ankane/chartkick

Answer 2

Just in case someone needs to use a more powerful and more customizable option:以防万一有人需要使用更强大、更可定制的选项：

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

The chart is bundled with gem and doesn't require external connections.该图表与 gem 捆绑在一起，不需要外部连接。 Also, it doesn't need to have a jQuery.此外，它不需要 jQuery。

And in case you need to have something very simple - https://github.com/railsjazz/peity_vanilla_rails如果你需要一些非常简单的东西 - https://github.com/railsjazz/peity_vanilla_rails

Rails 图表仅导致“正在加载...”，但从未呈现

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-07-18 12:26:33

解决方案2
0 2022-05-31 16:08:56

Rails 图表仅导致“正在加载...”，但从未呈现

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-07-18 12:26:33

解决方案2 0 2022-05-31 16:08:56

解决方案1
2 已采纳 2017-07-18 12:26:33

解决方案2
0 2022-05-31 16:08:56