让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 %> 

 

 

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

评论

16 楼 charlie_wuu 2009-02-25  

我用了同样的方法，为什么不行呢？没有报错，只是打不开图表，只显示一个小图标（通常打不开一个图片时，就显示这个东西）

15 楼 fyting 2008-09-07  

gigix 写道

robertlyc 写道

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

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

突然发现itechtag发展得不错呀，针对性挺强，一个要买一个要卖……
不过你这广告打得……找了半天，然后登录进去，终于在“我的云”->“我的技能云”里发现了

14 楼 gigix 2008-08-28  

robertlyc 写道

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

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

13 楼 juzhibest 2008-08-21  

好好跟你们学习....

12 楼 jkfzero 2008-08-19  

phoenix520 写道

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

返回的就一PNG，怎么会有相应的值。
但是使用简单许多倍，直接提交数据就行了。

11 楼 fly_ever 2008-08-07  

google 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来练手还可以，如果真的使用到项目中去，或者使用到商业应用中去，还是有很多问题需要考虑的。

10 楼 sungly 2008-08-06  

<div class='quote_title'>liuqiang 写道</div>
<div class='quote_div'>
<p>      去年年底的时候，所做的一个rails项目涉及到图表功能，主要有显示投票结果（柱状图）、网上办事统计结果（饼状图）、已办事件按月统计结果（线状图）……，当时可真是一件很麻烦的事情，开始准备搬flex来做，结果考虑到开发成本等等原因没采用，后来是自己写js，做了好一段时间，结果在跨平台上效果却不是很理想。当时真是苦煞我也，心想要是请几个专职的google专家来帮我做成和google一样的效果多好啊，巧合的是Google于去年晚些时候悄然推出了新图表API。Google图表最初是作为视频和财经服务的一项中间项目，后来Google决定将其公诸于世。Google始终如一地向大家提供如此优雅和高效的解决方案来处理通用问题，当然Google图表也不例外。</p>
<p>      那么是Google图表是如何为我们服务的呢？主要通过简单地发送一条URL来生成图表，调用者的主要工作是构建这些URL，该URL最主要有以下三个参数：图表的类型、图表的大小和图表的数据。图表的类型由“cht”参数指定。图表大小用chs指定，包括图表的长和宽，用整数来表示。图表数据用chd表示，Google提供了四种不同的数据编码方式，最简单的就是文本编码。通过给数据添加“t:”前缀。比如 <a href='http://chart.apis.google.com/chart?cht=lc&amp;amp;chs=100x50&amp;amp;chd=t:25,75,50'><span style='font-family: Courier New;'>http://chart.apis.google.com/chart?cht=lc&amp;chs=100x50&amp;chd=t:25,75,50</span></a> 就是一条完整的图表服务路径，更完整的图表API可以参考 <a href='http://code.google.com/apis/chart/'>http://code.google.com/apis/chart/</a>。</p>
<p>      那么接下来我们就是去构建这些URL，这里仍存在2个问题：</p>
<p>1 构建这样的URL需要大量的字符串拼接操作，较为繁琐，对于比较数据量比较大的图表，构建这样的URL就很麻烦。</p>
<p>2 构建这样的URL其实很多地方是重复的，只是少数的参数不一样，对于有大量图表显示的系统来说要做很多重复性的工作。</p>
<p>幸运的是，我们不必重复发明轮子了，DEEpak Jois已经封装了该API，他的gem叫做gchartrb，提供一个整洁简明的方式来生成图表URL。使用该gem的第一步是安装它：gem install gchartrb。 使用起来超乎想象的简单，效果也非常的炫，不信？看看我做的一些demo吧：）</p>
<p> </p>
<p>场景一 venn图<strong> </strong>例如：A有500个元素，B有400个元素，C有300个元素，AB交集为200，AC交集为100， BC交集为50通过以上的数据得到代表变量A,B,C的三个圆圈，圆圈的面积代表变量所含元素个数，圆圈的交集代表变量之间的交集。</p>
<p> </p>
<pre name='code' class='java'>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</pre>
<pre name='code' class='java'>&lt;%= image_tag @chart %&gt; </pre>
<p> </p>
<p><img src=' http://liuqiang.iteye.com/upload/picture/pic/18582/47d44714-be77-36d8-9899-b0f50dc410b8.bmp ' height='417' alt='' width='427'/></p>
<p> </p>
<p>场景二 柱状图 例如JE会员分布图，beijing 20000人， shanghai 18000人，tianjin 10000人，nanjing 8000 ，guangzhou 14000，shenzhen 16000</p>
<p> </p>
<pre name='code' class='ruby'> 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</pre>
<pre name='code' class='ruby'>&lt;%= image_tag @chart %&gt; </pre>
<p> </p>
<p><img src=' http://liuqiang.iteye.com/upload/picture/pic/18584/91e6df58-d84e-3bea-91b5-a41c62eb8490.bmp ' height='259' alt='' width='339'/></p>
<p>场景三 饼状图 例如JE文章投票人数统计，very good 200票， good 150票，just so so100票，bad 180票</p>
<p> </p>
<pre name='code' class='ruby'>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</pre>
<pre name='code' class='ruby'>&lt;%= image_tag @chart %&gt; </pre>
<p> </p>
<p><img src='http://liuqiang.iteye.com/upload/picture/pic/18586/ec091b1d-7705-3a77-a3fa-dd7457bdf61d.bmp ' height='248' alt='' width='354'/></p>
<p> 场景四 折线图 例如统计每周JE会员增加数量，一周的数量分别是 56 48 68 59 66 67 59</p>
<p> </p>
<pre name='code' class='ruby'>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</pre>
<pre name='code' class='ruby'>&lt;%= image_tag @chart %&gt; </pre>
<p> <img src='http://liuqiang.iteye.com/upload/picture/pic/18588/1648c1da-21d3-32f6-bff2-27dbaa131e7e.bmp ' height='252' alt='' width='346'/></p>
<p> </p>
<p>当然图表中的数据源在实际应用是应该来自于数据库的！</p>
</div>
<p> </p>

9 楼 phoenix520 2008-08-01  

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

8 楼 foxgst 2008-08-01  

robertpi 写道

中文支持很好啊，我没遇到出不来的文字。
当然我是用的google_chart。

什么环境？示例是？

7 楼 foxgst 2008-08-01  

right now 写道

用Iconv.conv()转化下

你试过了？怎么用？

6 楼 robertpi 2008-07-29  

中文支持很好啊，我没遇到出不来的文字。
当然我是用的google_chart。

5 楼 gakaki 2008-07-29  

有个问题哦 要一直联网 对了 javaeye的新闻贴有一个极其强悍的10个最有用的webchart图 另外.NET有silverlight 还有OPENFLASHCHART

4 楼 0701 2008-07-28  

用Iconv.conv()转化下

3 楼 foxgst 2008-07-28  

中文支持得不行。

中文GBK编码下不能正常显示，中文UTF-8编码下，字符数计算得不对，只能显示部分文字。

2 楼 wutao8818 2008-07-27  

真好啊。太好了！！对我很有用

1 楼 宏基小键盘 2008-07-27  

已经用过了，中文也能很好地支持，不错的东东，不过要联网哦，如果有单独的API包就好了。