在Rails 4.0中使用Chartkick

Abo*_*odi 12 charts ruby-on-rails-4

我如何在rails 4.0中使用Chartkick.

在宝石我添加:

宝石"chartkick"

在我看来,例如我添加了这个:

<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
Run Code Online (Sandbox Code Playgroud)

但页面只显示Loading ...生成的Html:

<div id="chart-1" style="height: 300px; text-align: center; color:
#999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">   Loading... </div> <script type="text/javascript">   new Chartkick.PieChart("chart-1", {"Football":10,"Basketball":5}, {}); </script>
Run Code Online (Sandbox Code Playgroud)

Jef*_*ton 21

为了让Rails 4中的chartkick工作,我做了以下工作:

1.在我的Gemfile中添加了chartkick gem(bundle install)

gem 'chartkick'
Run Code Online (Sandbox Code Playgroud)

2.将Google jsapi文件下载到我的供应商目录中

/railsapp/vendor/assets/javascripts/jsapi.js
Run Code Online (Sandbox Code Playgroud)

3.将 chartkick和jsapi添加到我的application.js

//= require jsapi
//= require chartkick
Run Code Online (Sandbox Code Playgroud)

之后,图表始终如一.


And*_*ane 18

请务必在图表之前包含JavaScript文件.

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
Run Code Online (Sandbox Code Playgroud)


Lal*_*dav 5

加载你的图表超快

我在这里使用highcharts,因为它不要求你每次连接到谷歌服务器

添加这个宝石

gem "chartkick"
Run Code Online (Sandbox Code Playgroud)

然后从这里下载highchart.js http://www.highcharts.com/download

将文件粘贴到app/vendor/assets/javascript/highchart.js中

打开你的application.js并要求这两个文件

//= require highcharts.js
//= require chartkick
Run Code Online (Sandbox Code Playgroud)

在此之后你很高兴你的图表将在瞬间加载