如何使用gRaphael on rails

Question

作为Rails的新手，我正在努力寻找一个很好的开放式图表库来使用rails。

通过一些研究，我发现了gRaphael，似乎它只适合我，如果我能在我的rails应用程序中使用它的话。我发现了一个gem，它看似聚合了graphael (graphael-rails)，但实际上并不了解如何使用它，因为我无法引用它的文件，并且必须将它们复制/粘贴到我的本地资源目录中。

我遵循了这些指导原则，并将raphael-min.js、g.raphael.js和g.pie.js放在了我的assets/javascripts文件夹中，还有一个demo.css文件放在了stylesheets文件夹中，还有一些背景图片。

我添加到application.html.erb

<%= javascript_include_tag "raphael-min.js","g.raphael.js","g.pie.js", "application" %>

在我看来：

...
<div id="holder"></div>
...
<%= javascript_tag "

            var r = Raphael(""holder"");
        r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);
            r.text(320, 70, 'Static Pie Chart').attr({ font: '20px ""Fontin Sans"", Fontin-Sans, sans-serif' });

       " %>
</body>

问题是，由于某些原因，piechart函数没有被构建到拉斐尔DOM对象中。

我可能做错了什么？我已经花了一整天的时间来寻找这个问题的答案，希望能得到大家的帮助。

下面是加载到我的html文件中的脚本

<script type="text/javascript" src="/assets/raphael-min.js?body=1">
<script type="text/javascript" src="/assets/g.raphael.js?body=1">
<script type="text/javascript" src="/assets/g.pie.js?body=1">
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-transition.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-alert.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-button.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-carousel.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-collapse.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-modal.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tab.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tooltip.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-popover.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-typeahead.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/g.pie.js?body=1">
<script type="text/javascript" src="/assets/g.raphael.js?body=1">
<script type="text/javascript" src="/assets/jquery-ui.min.js?body=1">
<script type="text/javascript" src="/assets/raphael-min.js?body=1">
<script type="text/javascript" src="/assets/retailers.js?body=1">
<script type="text/javascript" src="/assets/application.js?body=1">

和我的application.js文件内容：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

注意，拉斐尔的js文件被加载了两次，我将它们包含在我的application.html.erb文件中的唯一原因是，如果我不这样做，则在依赖于它的g.raphael.js和g.pie.js之后，将会加载raphael-min.js，并且我会得到javascript错误...

对此有什么建议吗？

谢谢

Answer 1

我不知道graphael，但我会用Google API。我在这里找到了它的一个红宝石包装器，它似乎得到了维护：

https://github.com/mattetti/googlecharts

用法：

我建议在某个地方创建一个变量：

@graph_url = Gchart.bar( :data => [[1,2,4,67,100,41,234],[45,23,67,12,67,300, 250]], :title => 'SD Ruby Fu level', :legend => ['matt','patrick'], :bg => {:color => '76A4FB', :type => 'gradient'}, :bar_colors => 'ff0000,00ff00')

然后在视图中：

<%= image_tag @graph_url, :width=>500, :height=>300 %>

这样看起来更干净:)