通过xpath将XML数据导入到应用程序控制器中，并将其张贴到application.html.erb页面上的高图中

下面是应用程序控制器和application.html的完整代码。呃，我真的想不明白，怎么了?它接受高图表中的标准值，例如，只是直接的数字，但是一旦我试图调用存储在数组中的值，它就会拒绝它。我不知道为什么。由于

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>

我实际上已经部署了您的应用程序并尝试以下操作。

创建控制器图:

rails g controller chart

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

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

现在创建文件views/chart/index.html动词和粘贴如下:

<!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时，您将自动获得图表/索引视图。我已经测试过了，效果很好。

views/layouts/application.html。动词应该看起来:

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

相关内容

最新更新

热门标签：