- 浏览: 162615 次
- 性别:
- 来自: 华东
文章分类
最新评论
-
chen_miao:
我是初学者,请问,我在flex设计好了带有按钮和下拉框的界面, ...
ruby+flex实现天气预报 -
barrytyh:
很多技术人员都有想法,但忘了一个根本性的问题,谁在给你MONE ...
互联网创业与软件开发 -
fireflyman:
囧......
关于并发和并行 -
fireflyman:
你老再次出现了
谈谈互联网新产品如何起步 -
qhh394141930:
写得很详细,受教了。谢谢!
从瀑布模型、极限编程到敏捷开发
去年年底的时候,所做的一个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 %>
当然图表中的数据源在实际应用是应该来自于数据库的!
评论
现在还无法支持unicode...两个字: 观望
http://www.itechtag.com
技能饼图就是用google chart做的
突然发现itechtag发展得不错呀,针对性挺强,一个要买一个要卖……
不过你这广告打得……找了半天,然后登录进去,终于在“我的云”->“我的技能云”里发现了
现在还无法支持unicode...两个字: 观望
http://www.itechtag.com
技能饼图就是用google chart做的
返回的就一PNG,怎么会有相应的值。
但是使用简单许多倍,直接提交数据就行了。
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来练手还可以,如果真的使用到项目中去,或者使用到商业应用中去,还是有很多问题需要考虑的。
<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;chs=100x50&amp;chd=t:25,75,50'><span style='font-family: Courier New;'>http://chart.apis.google.com/chart?cht=lc&chs=100x50&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'><%= image_tag @chart %> </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'><%= image_tag @chart %> </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'><%= image_tag @chart %> </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'><%= image_tag @chart %> </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>
当然我是用的google_chart。
什么环境?示例是?
你试过了?怎么用?
当然我是用的google_chart。
中文GBK编码下不能正常显示,中文UTF-8编码下,字符数计算得不对,只能显示部分文字。
发表评论
-
创建你自己的rails generator
2010-01-27 15:01 1222在多个rails项目中,有时需要共享一些公用的componen ... -
rspec实践一(从零开始)
2009-12-25 12:52 1381关于利用rspec的文章感 ... -
javascript-image-cropper-ui with rails
2009-07-31 23:18 1502在rails上传头像的过程中,一般后端会采用rma ... -
简简单单在rails中做定时任务
2009-07-27 19:58 3393在平时的开发过程中,经常会遇到一些定时任务的需求 ... -
用restful_authentication和role_requirement搭建验证授权系统
2008-09-30 21:20 1563转自 http://fanix.iteye.com/blog/ ... -
Rails中html_escape和sanitize
2008-09-26 13:33 2561转自:http://blackanger.blog.51cto ... -
Rails简洁的模板系统Malline
2008-09-14 15:25 1410前段时间听说ra ... -
在rails中优雅的进行模型校验
2008-09-07 20:53 2193在用rails进行开发时,最常见的操作的是前台提交 ... -
win+apache+mongrel下部署ROR
2008-09-01 20:16 1141gem install mongrel #选择最 ... -
Ruby中使用Memecached
2008-09-01 20:03 1303sudo apt-get install memcached ... -
在rails中使用memcached
2008-09-01 20:00 1130libeven memcached的使用需要li ... -
在Ruby中设计Callback机制
2008-08-31 21:11 1944阅读Paperclip源码,发现里面有一个不错的callbac ... -
我怎么就觉得rails适合做大型应用
2008-08-25 13:24 3520之前读了不少 ... -
像操作ActiveRecord一样操作XML
2008-08-10 18:05 1271在开发RESTful应用或者实现多个应用系统交互时 ... -
ImageMagick/Rmagick 安装的那些事儿
2008-08-05 12:54 1174windows平台×××××××××××××××××××××× ... -
10分钟给一个rails遗留系统添加标签功能
2008-07-19 10:18 994早些时候做过了一个rails系统,当时没有涉及到标签的功 ... -
让rails处理图片再简单一点
2008-07-14 18:25 3064先来看看rails处理图片的过程吧,用户上传图片, ... -
分享一款word风格的rails在线编辑器
2008-07-09 16:51 1509在线编辑器是web应用中最常见的东西了,关于它的作用 ... -
让rails处理图片再简单一点
2008-07-07 12:50 1113先来看看rails处理图片的过程吧,用户上传图片, ... -
利用rails轻松建立个性化主页门户
2008-07-04 12:10 1123简单来说,个性化主页就是结合了各种小模块和网络信息 ...
相关推荐
我正在阅读Rails引擎,并决定通过制作宝石来测试我的新知识。 由于我之前的项目涉及制作多个图表,因此我了解仅针对不同的图表在javascript和ruby中具有重复的数据结构和功能的痛苦。 图表是我的解决方案,用于将...
大致上它的作用类似于 Omniture/Google Analytics 所做的,但您的数据保留在您的应用程序中,因此您可以根据需要构建自定义图表。 例子 按日期范围划分的用户访问和页面查看计数: 先决条件: 对于 rails 4.x+ & ...
Chartkick的优势在于其简洁的API,通过一行Ruby代码,就可以生成复杂的图表,这对于Ruby on Rails开发者来说是一个巨大的福音,因为它节省了大量的时间和精力。 例如,如果你有一个包含销售数据的数组,你可以使用...
• JFreeChart - JFreeChart 是一个开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。 JFreeChart 项目从7年前便开始了,起始于 2000 年1月, 已经有四五万开发者已经使用了JFreeChart。JFreeChart ...
在 Google 地图上可视化轨迹 跟踪统计数据,如距离、持续时间、速度、上升等。 高程剖面 仪表板显示整体统计信息 按距离和持续时间划分的过去 12 个月活动的图表 GPX进出口 基本用户管理 屏幕截图 (注意:由于...
:fire: 对于管理图表和仪表板,请查看 ,对于高级可视化,请查看 :two_hearts: , 和完美伴侣快速开始将此行添加到您的应用程序的Gemfile中: gem "chartkick" 对于Rails 6 / Webpacker,运行: yarn add chartkick...
Rails PDF 在Rails中通过HTML,CSS和JS创建PDF文档。 特征: 基本上,您可以创建任何HTML / CSS / JS / Images页面并保存为PDF 快速生成PDF或保存到磁盘 具有页眉,页脚,页码,布局支持 很少有入门模板可帮助您...
该gem可帮助您将Google Analytics(分析)仪表板导入到Rails应用程序中。 您可以从Google Analytics(分析)中提取以下统计信息 最受欢迎的页面 地理图表(地图)或表格,代表给定时间段内的以下数据 用户来自世界...
前端项目"chartkick.zip"就是专为实现这一目标而设计的,它以极简的代码实现美观的JavaScript图表。Chartkick的核心理念是将前端开发人员从复杂的图表绘制逻辑中解放出来,让他们能够更加专注于业务逻辑和用户体验。...
其他功能包括汇总(总计/平均)页脚行,批量操作,显示/隐藏列,响应折叠列,google图表和嵌入式树状图。 该宝石包括jQuery DataTables资产。 适用于postgres,mysql,sqlite3和数组。 现场演示 单击此处进行。 ...
Head-First的方式会通过生动的实例和易于理解的图表,让读者轻松学会事件处理、DOM操作、AJAX以及最新的ES6特性。 接着是《Head-First SQL》,SQL是数据库查询语言,是数据管理的基础。这本书将引导读者掌握SELECT...
这款最新的2.7.1版本包含了Angular Full Version、Rails Full Version以及Meteor Full Version,这三种不同的全栈开发框架的集成,为开发者提供了更多元化的选择,以满足不同项目需求。 一、Angular Full Version ...
该项目是通过引导的。 您将在下面找到一些有关如何执行...Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
滑块(bxslider-rails) 日历(完整日历插件) 可标记(Select2) 嵌套表格(茧) PDF(邪恶的PDF) STI-单表继承(枚举) 分页(Kaminari) 身份验证(Devise) 图表(GetOrgChart) Google Map API 稽核...
3. **Material Design**:部分模板可能采用了Google的Material Design规范,这种设计风格注重简洁、直观的用户界面,通过颜色、空间和动画来提升交互体验。 4. **Vue.js、React或Angular集成**:现代模板可能集成了...
它适用于多种编程语言和框架,包括但不限于ASP.NET、Blazor、Django、Flask、Rails、Spring、Symfony、NodeJS等。该模版自推出以来,已经取得了超过10万次的惊人销量,成为全球最畅销的HTML管理后台模版之一。 ####...
它提供了一种简单的方式来表达Django模型数据为图表,非常适合快速原型开发。 4. **Plotly-Django**: Plotly是一个强大的在线图表制作工具,也提供了Python库。Plotly-Django是Plotly的Django集成,使用户能够...
`mastodon-chart`是为在Kubernetes(K8s)集群上部署Mastodon而设计的Helm图表,Helm是Kubernetes的应用包管理工具,它简化了应用的打包、部署和管理过程。 在这个`mastodon-chart`压缩包中,我们主要会涉及以下几...
示例开源项目使用 Google Charts API 快速创建和共享图表的 RoR 应用程序。用于与 Semantria 文本分析 API 交互的 Ruby gem。 基于语音剪辑的招聘应用程序的 MVP。 该应用程序与 LinkedIn API 进行了大量交互。 它...
Web应用框架如AngularJS(现在发展到Angular),是Google开发的用于构建单页面应用的框架,强调数据绑定和依赖注入。Ruby on Rails是基于Ruby语言的框架,提供了MVC结构和约定优于配置的理念。React和Vue.js则分别...