1

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

通过一些研究，我发现了 gRaphael，如果我可以在我的 rails 应用程序中使用它，它似乎对我有用。了解如何使用它，因为我无法引用它的文件，并且必须将它们复制/粘贴到我的本地资产目录。

我遵循了这些指南，并将 raphael-min.js、g.raphael.js 和 g.pie.js 放在了我的 assets/javascripts 文件夹中，以及在 stylesheets 文件夹中的 demo.css 文件，以及一些背景图片.

我添加到 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>

问题是由于某种原因，饼图函数没有被内置到 Raphael 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 .

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

对此有何建议？

谢谢

4

1 回答 1

1

我不了解graphael，但我会使用Google API。我在这里找到了一个似乎得到维护的 ruby​​ 包装器：

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

这样看起来更干净:)

于 2012-07-30T12:41:46.510 回答