Rails和Flash创建漂亮的报表

本文将介绍一种结合Rails和Flash,创建报表的方法.
原文比较冗长,我简单翻译

1.生成效果如下:




2. 多种报表实现方式

Gruff和 JfreeChart


Gruff 需要 RMagick,而JFreeChart 需要java支持,代码类似如下:

  def CreateChart
         pipe = IO.popen "java -cp C:\\InstantRails\\rails_apps\\project\\jfree\\src;C:\\InstantRails\\rails_apps\\project\\jfree\\lib\\jcommon-1.0.0-rc1.jar;C:\\InstantRails\\rails_apps\\project\\jfree\\lib\\jfreechart-1.0.0-rc1.jar; CreateChart" 
         pipe.close
         redirect_to "/graph/report" 
      end

XML/SWF做为Flash库,是个不错的选择 而且有 插件支持.应该是免费



3. amCharts

这是我们要介绍的用法,因为,更容易用,虽然,免费版带水印.

这里下载
解压缩有三个文件.swf .xml和amcharts_key.txt

4. 数据源部分

这里通过rails的controller提供数据,传给FLex

  def population
    @cities = City.find(:all)
    @population_data_link = formatted_population_reports_url(:xml)
    respond_to do |format|
      format.html
      format.xml  { render :action => "population.xml.builder", :layout => false }
    end
  end

@cities 是City相关记录,有population

@populationdatalink 保存取得图表数据的url地址
这个地址,能够访问,是因为有路由如下

#routes.rb:

  map.resources :reports, :collection => {:population => :get}

5. Flash客户端支持检查

为了保证用户能够正常显示Flash 所以需要swfobject.js 那么,就要在view里增加

  <%= javascript_include_tag 'swfobject' %>

6. population.html.erb 显示

  <div id="population_chart" class='chart'>
    <strong>如果你没有Flash Player这里会显示</strong>
    <p>或者,版本不支持播放,需要更新</p>
  </div>

  <script type="text/javascript">
    // <![CDATA[    
    var so = new SWFObject("/amcolumn/amcolumn.swf", "population_chart", "800", "380", "8", "#000000");
    so.addVariable("path", "/amcolumn/");
    so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));
    so.addVariable("data_file", escape("<%= @population_data_link %>"));
    so.addVariable("additional_chart_settings", "<settings><labels><label><x>250</x><y>25</y><text_size>18</text_size><text><![CDATA[<b>California Population as of <%= Time.now.to_s(:db) %></b>]]></text></label></labels></settings>");
    so.addVariable("preloader_color", "#000000");
    so.write("population_chart");
    // ]]>
  </script>

引用

  so.addVariable("path", "/amcolumn/");

库文件地址

引用

  so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));

xml是配置文件

引用

  so.addVariable("data_file", escape("<%= @population_data_link %>"));

and population.xml.builder

  xml.instruct! :xml, :version=>"1.0", :encoding=>"UTF-8"
  xml.chart do
    # 生成城市名
    xml.series do    
      @cities.each_with_index do |city, index|
        xml.value city.name, :xid => index
      end
    end

    xml.graphs do
     #这部分用来控制显示
      xml.graph :gid => 'population' do
        @cities.each_with_index do |city, index|
          population = city.population
          case population
            # 当人口大于一百万显示红色
            when > 100000
              xml.value value, :xid => index, :color => "#ff43a8", :gradient_fill_colors => "#960040,#ff43a8", :description => level
            else
              xml.value value, :xid => index, :color => "#00C3C6", :gradient_fill_colors => "#009c9d,#00C3C6", :description => level
            end
        end
      end
    end

  end