让google来为rails画图表

      去年年底的时候，所做的一个rails项目涉及到图表功能，主要有显示投票结果（柱状图）、网上办事统计结果（饼状图）、已办事件按月统计结果（线状图）……，当时可真是一件很麻烦的事情，开始准备搬flex来做，结果考虑到开发成本等等原因没采用，后来是自己写js，做了好一段时间，结果在跨平台上效果却不是很理想。当时真是苦煞我也，心想要是请几个专职的google专家来帮我做成和google一样的效果多好啊，巧合的是Google于去年晚些时候悄然推出了新图表API。Google图表最初是作为视频和财经服务的一项中间项目，后来Google决定将其公诸于世。Google始终如一地向大家提供如此优雅和高效的解决方案来处理通用问题，当然Google图表也不例外。

      那么是Google图表是如何为我们服务的呢？主要通过简单地发送一条URL来生成图表，调用者的主要工作是构建这些URL，该URL最主要有以下三个参数：图表的类型、图表的大小和图表的数据。图表的类型由“cht”参数指定。图表大小用chs指定，包括图表的长和宽，用整数来表示。图表数据用chd表示，Google提供了四种不同的数据编码方式，最简单的就是文本编码。通过给数据添加“t:”前缀。比如 http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:25,75,50 就是一条完整的图表服务路径，更完整的图表API可以参考 http://code.google.com/apis/chart/。

      那么接下来我们就是去构建这些URL，这里仍存在2个问题：

1 构建这样的URL需要大量的字符串拼接操作，较为繁琐，对于比较数据量比较大的图表，构建这样的URL就很麻烦。

2 构建这样的URL其实很多地方是重复的，只是少数的参数不一样，对于有大量图表显示的系统来说要做很多重复性的工作。

幸运的是，我们不必重复发明轮子了，DEEpak Jois已经封装了该API，他的gem叫做gchartrb，提供一个整洁简明的方式来生成图表URL。使用该gem的第一步是安装它：gem install gchartrb。 使用起来超乎想象的简单，效果也非常的炫，不信？看看我做的一些demo吧：）

 

场景一 venn图 例如：A有500个元素，B有400个元素，C有300个元素，AB交集为200，AC交集为100， BC交集为50通过以上的数据得到代表变量A,B,C的三个圆圈，圆圈的面积代表变量所含元素个数，圆圈的交集代表变量之间的交集。

 

require 'rubygems'
require 'google_chart'
def venn_diagram
    GoogleChart::VennDiagram.new("400x400", 'Venn Diagram') do |vd|
      vd.data "Blue", 500,'0000ff'
      vd.data "Green", 400, '00ff00'
      vd.data "Red", 300, 'ff0000'
      vd.intersections 200, 100, 50
      @chart = vd.to_url
    end
end

<%= image_tag @chart %> 

 

 

场景二 柱状图 例如JE会员分布图，beijing 20000人， shanghai 18000人，tianjin 10000人，nanjing 8000 ，guangzhou 14000，shenzhen 16000

 

 def bar_chart
    GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
      bc.data "beijing", [20000], '0000ff'
      bc.data "shanghai", [18000], 'ff0000'
      bc.data "tianjin", [10000], '00ff00'
      bc.data "nanjing", [8000], '00aaff'
      bc.data "guangzhou", [16000], '0effee'
      bc.data "shenzhen", [14000], 'eeff00'
      @chart = bc.to_url
    end
  end

<%= image_tag @chart %> 

 

场景三 饼状图 例如JE文章投票人数统计，very good 200票， good 150票，just so so100票，bad 180票

 

def pie_chart
    GoogleChart::PieChart.new('320x200', "Pie Chart",false) do |pc|
      pc.data "very good", 300
      pc.data "good", 200
      pc.data "just so so", 100
      pc.data "bad", 180
      pc.show_labels = true
      @chart = pc.to_url
    end
end

<%= image_tag @chart %> 

 

 场景四 折线图 例如统计每周JE会员增加数量，一周的数量分别是 56 48 68 59 66 67 59

 

GoogleChart::LineChart.new('320x200', "Line XY Chart", true) do |lcxy|
      lcxy.data "amount", [[1,56], [2,48], [3,68], [4,59], [5,66], [6,67], [7,59]], '0000ff'
      @chart = lcxy.to_url
end

<%= image_tag @chart %> 

 

 

当然图表中的数据源在实际应用是应该来自于数据库的！

4.2 Google is constantly innovating in order to provide the best possible experience for its users. You acknowledge and agree that the form and nature of the Services which Google provides may change from time to time without prior notice to you.

4.3 As part of this continuing innovation, you acknowledge and agree that Google may stop (permanently or temporarily) providing the Services (or any features within the Services) to you or to users generally at Google's sole discretion, without prior notice to you. You may stop using the Services at any time. You do not need to specifically inform Google when you stop using the Services.

5.6 Unless you have been specifically permitted to do so in a separate agreement with Google, you agree that you will not reproduce, duplicate, copy, sell, trade or resell the Services for any purpose.

鼠标移上去的时候有没有相应的值提示？

看了一下 google chart
现在还无法支持unicode...两个字: 观望

http://www.itechtag.com
技能饼图就是用google chart做的