通过xpath将xml数据引入应用程序控制器并发布到application.html.erb页面上的高图表

时间:2014-05-17 21:31:06

标签: xpath nokogiri

下面是我的代码完整的应用程序控制器和application.html.erb,我真的无法解决这个问题,有什么问题?!这接受高图表中的标准值,例如,只是直接数字,但是一旦我尝试调用存储在数组中的值,它就会拒绝它。我不知道为什么。感谢

class ApplicationController < ActionController::Base

require 'nokogiri'
require 'open-uri'

protect_from_forgery
before_filter :set_locale
def index
@doc=      Nokogiri::XML(open("http://api.worldbank.org/countries/BRA/indicators/1.0.HCount.2.5usd?per_page=10&date=1960:2014"))
m = @doc.xpath("//wb:value").collect(&:text)
@values = Array.new
m.each do |m|
@values << m
end   
end  
end

完整的application.html.erb代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Project</title>
 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag :defaults %>
 <%= csrf_meta_tags %>
 <script src="http://code.highcharts.com/highcharts.js"></script>
 <script src="http://code.highcharts.com/modules/exporting.js"></script>
 <script>  
 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Brazil Poverty Headcount'
        },
        subtitle: {
            text: 'Source: WorldBank.com'
        },
        xAxis: {
            categories: [
                '2009',
                '2008',
                '2007',
                '2006',
                '2005',
                '2004',
                '2003',
                '2002',
                '2001',
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'X-Axis Data'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:   </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Brazil',
            data: <%=@values.inspect%>
          }]
      });
   });  


   </script>


    </head>
   <body>
   <div style= "margin:50px">  
    <div id="container" style="min-width: 310px; height: 600px; margin: 15 auto"></div> 

   <div id ="signing" style="width:200px; height:200px; float:right;">
    <% if current_user %>
   Logged in as <%= current_user.email %>
  <%= link_to "Log Out", logout_path %>
    <% else %>
   <%= link_to "Sign Up", signup_path %>
 <%= link_to "Log In", login_path %>
  <% end %>

     </div>

     <div id="admin" style="width:100px; height:100px; float:right;">
    <%= link_to "Admin", new_admin_user_session_path  %>
     </div>


    <div>
    Language:
      <%= link_to_unless_current "English", locale: "en" %> |
       <%= link_to_unless_current "Spanish", locale: "sp" %>


    </div>


    <%= yield %>

   </div>
  </body>
  </html>

1 个答案:

答案 0 :(得分:0)

我实际部署了您的应用并尝试以下操作。

创建控制器图表:

rails g controller chart

编辑app / controllers / chart_controller.rb并添加以下内容:

def index

  @doc = Nokogiri::XML(open("http://api.worldbank.org/countries/BRA/indicators/1.0.HCount.2.5usd?per_page=10&date=1960:2014"))
  m = @doc.xpath("//wb:value").collect(&:text)
  @values = Array.new
  m.each do |m|
    @values << m.to_f
  end   

end

现在创建文件视图/ chart / index.html.erb并粘贴以下内容:

<!DOCTYPE html>
<html>
<head>
<title>Maxo</title>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag  "http://code.highcharts.com/highcharts.js" %>
   <%= javascript_include_tag"http://code.highcharts.com/modules/exporting.js" %>
   <%= csrf_meta_tags %>

   <script>  
 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Brazil Poverty Headcount'
        },
        subtitle: {
            text: 'Source: WorldBank.com'
        },
        xAxis: {
            categories: [
                '2009',
                '2008',
                '2007',
                '2006',
                '2005',
                '2004',
                '2003',
                '2002',
                '2001',
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'X-Axis Data'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:   </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Brazil',
            data: <%= @values.inspect %>
          }]
      });
   });  


   </script>


    </head>
   <body>
   <div style= "margin:50px">  
    <div id="container" style="min-width: 310px; height: 600px; margin: 15 auto"></div> 

     </div>

    <%= yield %>

   </div>
  </body>
  </html>

还要确保已将适当的路由规则添加到:config / routes.rb。为简单起见,您只需添加:

root :to => 'chart#index'

在这种情况下,当localhost:3000时,您将自动获得图表/索引视图。我测试了它,它工作正常。

对于任何情况,视图/ layouts / application.html.erb应该看起来:

<!DOCTYPE html>
<html>
<head>
  <title>Test2</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>