swfchart

swfchart

from LetRails by admin

简介

Swfchart能够让你很轻松的将maani.us的SWF/XML Chart绘图工具 集成到你的Rails应用中。

安装

首先你需要去maani.us下载SWF/XML Chart ,目前经过测试的版本是4.6版，然后将其解压缩到你的public目录下：

public
|-- charts.swf
`-- charts_library
    |-- arno.swf
    |-- arst.swf
    |...........
    `-- scno.swf

然后安装swfchart generator：

$ cd $RAILS_ROOT/vendor/plugins
$ svn co https://svn.elctech.com/svn/public/plugins/swfchart swfchart

使用

1. 生成文件

$ ./script/generate swfchart
create lib/swfchart_helper.rb
create app/controllers/swfcharts_controller.rb
create app/models/swfchart.rb
create test/unit/swfchart_test.rb
create test/functional/swfcharts_controller_test.rb

2. 添加路由，你需要在route.rb中为swfchart添加一条路由：

map.swfcharts 'swfcharts/:name', :controller => 'swfcharts', :action => 'show'

3. 修改environment.rb，在启动时加载swfchart_helper.rb:

require 'swfchart_helper.rb'

4. 在需要绘制图表的view中调用swf_chart helper：

<%= swf_chart {|c|
  c.data_source = swfcharts_url(:name => "sample_line")
  c.width = "400"
  c.height = "320"
} %>

这将会在你的view中绘制一个400×320的图标控件，下面对图表的各个属性进行说明：

• data_source，图表的数据来源，根据第二步添加的路由，上面的例子生成的URL为/swfcharts/sample_line，这是swfchart内置的数据源，它将会渲染一个线型图。
• width，图表控件的宽度
• height，图表控件的高度
• bg_color，图表的背景颜色，比如”000000″代表黑色
• transparent，是否透明，true表示透明
• license，SWF/XML Chart免费版只提供有限的功能，因此，如果你需要使用增强功能，最好购买一个License

5. 如果你想要构造自己的数据源，可以参考sample_line，它是swfchart model的一个class method：

def self.sample_line
  swf = Swfchart.new('sample swf', 'line')
  swf.data_array = []
  swf.data_array[0] = ['a', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
  swf.data_array[2] = ['Region B', 1, 1, 2, 3, 4, 6, 8, 8, 5, 7, 9, 4, 8, 4 ]
  swf.data_array[1] = ['Region A', 53, 52, 52, 52, 50, 44, 43, 34, 32, 28, 25, 20, 15, 10]
  swf

end

Swfchart.new的第一个参数指明图表的名称，第二个参数是图表的类型，这里我们创建一个线性图，事实上还有第三个参数，它指名横轴坐标的显示间隔，默认为2。

data_array存储真正的数据源，第一列存储横轴的坐标，显示间隔为2意味着，横轴只会显示1,4,7,10,13这几个数值，后面各列是真正的数据，每列数据的第一个元素为这个数据的名称。

6. 就这么简单，当然如果你需要更复杂的控制，swfchart还提供以下属性可供修改：

• axis_ticks
• axis_value
• chart_border
• chart_grid_h
• chart_grid_v
• chart_pref
• chart_rect
• chart_transition
• chart_value_text
• chart_value
• draw
• legend_label
• legend_rect
• legend_transition
• link
• link_data
• live_update
• series_color
• series_explode
• series_gap
• series_switch

关于这些属性的含义及用法请参看maani.us的相关文档 ，如果需要修改这些属性，则只需要将XML attributes转换为Ruby hash即可，比如：

swf.chart_rect = {'x'=>4, 'y'=>4, 'width'=>72, 'height'=>52, 'positive_color'=>"ffffff", 'negative_color'=>"ffffff", 'positive_alpha'=>100, 'negative_alpha'=>100}

将覆盖原有的chart_rect属性。

7. 最后给出上面的line chart截图，有一些难看：