`
liuqiang
  • 浏览: 162615 次
  • 性别: Icon_minigender_1
  • 来自: 华东
社区版块
存档分类
最新评论

让google来为rails画图表

    博客分类:
  • Ruby
阅读更多

      去年年底的时候,所做的一个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包就好了。

相关推荐

    图表:for在Rails 5.x中用一行Ruby添加漂亮且可重复使用的图表

    我正在阅读Rails引擎,并决定通过制作宝石来测试我的新知识。 由于我之前的项目涉及制作多个图表,因此我了解仅针对不同的图表在javascript和ruby中具有重复的数据结构和功能的痛苦。 图表是我的解决方案,用于将...

    audit_rails:使用图表分析对 crud 和链接跟踪进行审计跟踪

    大致上它的作用类似于 Omniture/Google Analytics 所做的,但您的数据保留在您的应用程序中,因此您可以根据需要构建自定义图表。 例子 按日期范围划分的用户访问和页面查看计数: 先决条件: 对于 rails 4.x+ & ...

    Chartkick用一行Ruby代码创建漂亮的JavaScript图表

    Chartkick的优势在于其简洁的API,通过一行Ruby代码,就可以生成复杂的图表,这对于Ruby on Rails开发者来说是一个巨大的福音,因为它节省了大量的时间和精力。 例如,如果你有一个包含销售数据的数组,你可以使用...

    Chart 极品web报表控件收集(Flot,AmCharts, Emprise JavaScript Charts...)

    • JFreeChart - JFreeChart 是一个开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。 JFreeChart 项目从7年前便开始了,起始于 2000 年1月, 已经有四五万开发者已经使用了JFreeChart。JFreeChart ...

    tracklog-rails:Tracklog是用于管理GPS跟踪日志的Rails应用程序

    在 Google 地图上可视化轨迹 跟踪统计数据,如距离、持续时间、速度、上升等。 高程剖面 仪表板显示整体统计信息 按距离和持续时间划分的过去 12 个月活动的图表 GPX进出口 基本用户管理 屏幕截图 (注意:由于...

    chartkick:使用一行Ruby创建漂亮JavaScript图表

    :fire: 对于管理图表和仪表板,请查看 ,对于高级可视化,请查看 :two_hearts: , 和完美伴侣快速开始将此行添加到您的应用程序的Gemfile中: gem "chartkick" 对于Rails 6 / Webpacker,运行: yarn add chartkick...

    rails_pdf:在Ruby on Rails应用程序中生成任何复杂度的PDF的可靠方法

    Rails PDF 在Rails中通过HTML,CSS和JS创建PDF文档。 特征: 基本上,您可以创建任何HTML / CSS / JS / Images页面并保存为PDF 快速生成PDF或保存到磁盘 具有页眉,页脚,页码,布局支持 很少有入门模板可帮助您...

    ga_dashboard:这个宝石有助于将Google Analytics(分析)仪表板带入Rails应用程序

    该gem可帮助您将Google Analytics(分析)仪表板导入到Rails应用程序中。 您可以从Google Analytics(分析)中提取以下统计信息 最受欢迎的页面 地理图表(地图)或表格,代表给定时间段内的以下数据 用户来自世界...

    前端项目-chartkick.zip

    前端项目"chartkick.zip"就是专为实现这一目标而设计的,它以极简的代码实现美观的JavaScript图表。Chartkick的核心理念是将前端开发人员从复杂的图表绘制逻辑中解放出来,让他们能够更加专注于业务逻辑和用户体验。...

    effective_datatables:对于Ruby on Rails,有效的ActiveRecord到Datatables dsl。 快速制作智能表

    其他功能包括汇总(总计/平均)页脚行,批量操作,显示/隐藏列,响应折叠列,google图表和嵌入式树状图。 该宝石包括jQuery DataTables资产。 适用于postgres,mysql,sqlite3和数组。 现场演示 单击此处进行。 ...

    head-first 系列合集(下)

    Head-First的方式会通过生动的实例和易于理解的图表,让读者轻松学会事件处理、DOM操作、AJAX以及最新的ES6特性。 接着是《Head-First SQL》,SQL是数据库查询语言,是数据管理的基础。这本书将引导读者掌握SELECT...

    inspinia_admin 2.7.1最新版本

    这款最新的2.7.1版本包含了Angular Full Version、Rails Full Version以及Meteor Full Version,这三种不同的全栈开发框架的集成,为开发者提供了更多元化的选择,以满足不同项目需求。 一、Angular Full Version ...

    weather-react:各城市的天气。 Google Map API,Sparklines图表,openweathermap.org

    该项目是通过引导的。 您将在下面找到一些有关如何执行...Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态&lt;met

    SchedulyBridge:个人用途的日程安排,注释和在线简历申请

    滑块(bxslider-rails) 日历(完整日历插件) 可标记(Select2) 嵌套表格(茧) PDF(邪恶的PDF) STI-单表继承(枚举) 分页(Kaminari) 身份验证(Devise) 图表(GetOrgChart) Google Map API 稽核...

    网站后台管理模板(4个).rar

    3. **Material Design**:部分模板可能采用了Google的Material Design规范,这种设计风格注重简洁、直观的用户界面,通过颜色、空间和动画来提升交互体验。 4. **Vue.js、React或Angular集成**:现代模板可能集成了...

    Metronic-全球销量第一的HTML管理后台模版[更至v8.2.0]

    它适用于多种编程语言和框架,包括但不限于ASP.NET、Blazor、Django、Flask、Rails、Spring、Symfony、NodeJS等。该模版自推出以来,已经取得了超过10万次的惊人销量,成为全球最畅销的HTML管理后台模版之一。 ####...

    Django中是否有用于数据可视化的现有项目或库?

    它提供了一种简单的方式来表达Django模型数据为图表,非常适合快速原型开发。 4. **Plotly-Django**: Plotly是一个强大的在线图表制作工具,也提供了Python库。Plotly-Django是Plotly的Django集成,使用户能够...

    mastodon-chart:在Kubernetes上部署Mastodon联合社交媒体服务器的Helm图表

    `mastodon-chart`是为在Kubernetes(K8s)集群上部署Mastodon而设计的Helm图表,Helm是Kubernetes的应用包管理工具,它简化了应用的打包、部署和管理过程。 在这个`mastodon-chart`压缩包中,我们主要会涉及以下几...

    duboff.github.io:网络简历

    示例开源项目使用 Google Charts API 快速创建和共享图表的 RoR 应用程序。用于与 Semantria 文本分析 API 交互的 Ruby gem。 基于语音剪辑的招聘应用程序的 MVP。 该应用程序与 LinkedIn API 进行了大量交互。 它...

    超全的web开发工具和资源 - 编程技术 - IT工作生活这点事1

    Web应用框架如AngularJS(现在发展到Angular),是Google开发的用于构建单页面应用的框架,强调数据绑定和依赖注入。Ruby on Rails是基于Ruby语言的框架,提供了MVC结构和约定优于配置的理念。React和Vue.js则分别...

Global site tag (gtag.js) - Google Analytics