写点什么

Google 图表及 gchartrb 初探

  • 2008-06-29
  • 本文字数:3328 字

    阅读完需:约 11 分钟

Google 于去年晚些时候悄然推出了新图表API 。Google 图表最初是作为视频和财经服务的一项中间项目,后来Google 决定将其公诸于世。Google 始终如一地向大家提供如此优雅和高效的解决方案来处理通用问题。当然Google 图表也不例外。这和Shangri-La 的软件即服务(SaaS)非常贴近。

Ruby 开发者已经在过去几年里享用了诸多不同的图表库。例如 Sparklines Gruff SVG::Graph 等项目无疑已经可以满足需求,但是他们大多都依赖于 RMagick,这让我们度过了数个难眠之夜的煎熬来安装犹如中世纪怪兽般的 ImageMagick。

然而,我们再也不用花费这些无用功了。方便如构造一条 URL 来创建图表怎么样?不需要记录什么状态,也没有恶心的 XML 需要传输。用星际舰队船长的经典名言来说,Google 已经“做到了”并且提供了一种通过 HTTP 协议的便捷来自由构造图表的方法。

  • 不需要安装额外的软件
  • 跨浏览器兼容
  • 可以在任何支持 HTTP 协议的平台工作
  • 图形可以由 Google 服务来显示或者自行下载并显示
  • 宽松的使用条款

不光 API 非常易用,图形也非常好看。

比如,一个饼图:

http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=150x100柱状图也非常容易:

http://chart.apis.google.com/chart?cht=bvg&chs=<br></br>200x125&chd=t:80,50,70%7C100,90,50&chco=cc0000,00aa00一个带有渐变背景的线形图意味着 URL 有一点点长:

http://chart.apis.google.com/chart?cht=lc&chd=<br></br>s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkegg<br></br>jp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=<br></br>0:%7C1%7C2%7C3%7C4%7C5%7C1:%7C0%7C50%7C100&chs=200<br></br>x125&chf=c,lg,45,ffffff,0,76A4FB,0.75%7Cbg,s,EFEFEF我们甚至还可以生成彩色的地图:

http://chart.apis.google.com/chart?chco=f5f5f5,ed<br></br>f0d4,6c9642,365e24,13390a&chd=s:fSGBDQBQBBAGABCBDAKLCD<br></br>GFCLBBEBBEPASDKJBDD9BHHEAACAC&chf=bg,s,eaf7fe&chtm=usa&<br></br>chld=NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEO<br></br>HIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR&chs=44<br></br>0x220&cht=t<span></span> 图表可以达到相当复杂的程度,然而 URL 却始终可维护: http://chart.apis.google.com/chart?cht=r&chs=200x200&chd=<br></br> s:voJATd9v,MW9BA9&chco=FF0000,FF9900&chls=2.0,4.0,0.0|<br></br> 2.0,4.0,0.0&chxt=x&chxl=0:|0|45|90|135|180|225|270|315&chxr<br></br> =0,0.0,360.0&chg=25.0,25.0,4.0,4.0&chm=B,FF000080,0,1.0,5.0|<br></br> B,FF990080,1,1.0,5.0|h,0000FF,0,1.0,4.0|h,3366CC80,0,0.5,5.0|<br></br>V,00FF0080,0,1.0,5.0|V,008000,0,5.5,5.0|v,00A000,0,6.5,4很好用,不是吗?如果不阅读文档的话理解 URL 参数可能有些困难,但是载入时间非常快,并且接口简单的不能再简单了。

这里列出了几种使用方法:

  • 在已存在的 HTML 页面中嵌入图表: <img alt="" src="http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"></img>
  • 通过 RHTML 或者 HAML 标记使用图表: <%= image_tag "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200" %>
  • 将图表下载为 PNG 文件: wget -O chart.png "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"

如果你不喜欢依赖 Google 的服务器来渲染图表的话,可以很容易地将图片上传到自己的服务器上。例如,这里有一个简单的 Capistrano 任务,可以将图表抓取下来并上载到部署服务器上。

set :chart_url, "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"<p> task :update_chart do</p><br></br>wget -O chart.png #{chart_url}<br></br> put File.read("chart.png"), "#{deploy_to}/chart.png"<br></br>rm -f chart.png<br></br>end### 基础参数

通过简单地发送一条 URL 来生成图表真是不错,但是如何能够通过参数来构建 URL 呢?在 Google 的站点上有完整的API 引用,然而我们可以通过几个简单的参数就构造出数量惊人的图表。

用于生成图表的基础URL 总是:

http://chart.apis.google.com/chart?通过 Google 来构造图表仅需要三个参数:图表的类型、图表的大小和图表的数据。

图表的类型由“cht”参数指定。有大量的图表类型可供选择,但是最常用的还是线形图(“lc”)、水平柱状图(“bhs”)和垂直柱状图(“bvs”)。如果要生成线形图,URL 如下:

http://chart.apis.google.com/chart?cht=lc我们还缺少两个参数:图表大小和图表数据。接下来让我们来补全它们。图表大小(“chs”)包括图表的长和宽,用整数来表示。例如,如果我们的图表是 100 像素宽且 50 像素高的话:

http://chart.apis.google.com/chart?cht=lc&chs=100x50最终,我们来添加图表数据(“chd”)。Google 提供了四种不同的数据编码方式,最简单的就是文本编码。通过给数据添加“t:”前缀,我们可以告知 Google 我们所使用的数据是文本编码的:

http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:文本编码使用一个或多个取值从 0 到 100 的浮点数。数字越接近 100,在图表中的位置就越高。如果值超过了 100 的话,我们需要缩放到正确的范围。在图中添加 3 个点,URL 如下:

<a href="http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:25,75,50">http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:25,75,50</a>最终的图表是这样的:

通过这三个参数,我们几乎可以生成任何我们需要的图表。如果想要让图表更华丽一些呢?API 提供了颜色、渐变和图例等特性。这些附加选项超出的本文的范围,请查阅精心编写的 API 引用

通过 gchartrb 便捷生成图表

我们可以看到通过基本参数构建 URL 足够直接,但是生成单个图表的代码的复杂程度会破坏 DRY 准则(Don’t Repeat Yourself)。如果我们需要在相同页面上生成许多图表的话,重复代码的复制和粘贴会如同梦魇一般。

为了解决这个问题,我们将重复的代码抽象成类和方法。也许我们需要一个方法来收集图表数据并将其序列化成 URL。另外一个方法可以根据一个预定义名字来选取 正确的颜色。第三个方法可以生成一个图例。我们这里提及的东西是一个 Google 的 API 的封装,可以给我们提供一个友好的接口。

幸运的是,我们不必重复发明轮子了。 Deepak Jois 已经封装了该 API。他的 gem 叫做 gchartrb ,提供一个整洁简明的方式来生成图表 URL。使用该 gem 的第一步是安装它:

gem install gchartrb现在我们可以打开最喜欢的编辑器开始编码了。下面是展示了我们是如何生成一个简单柱状图的:

require 'rubygems'<br></br>require 'google_chart'<p>GoogleChart::BarChart.new('800x200', 'My Chart', :vertical) do |bc|</p><br></br> bc.data 'Trend 1', [5,4,3,1,3,5], '0000ff'<br></br> bc.data 'Trend 2', [1,2,3,4,5,6], 'ff0000'<br></br> bc.data 'Trend 3', [6,5,4,4,5,6], '00ff00'<br></br> puts bc.to_url<br></br>end执行这段代码,结果如下:

http://chart.apis.google.com/chart?chtt=Bar+Chart&cht=<br></br>bvg&chs=800x200&chco=0000ff,ff0000,00ff00&chd=s:yoeKey,KU<br></br>eoy9,9yooy9&chdl=Trend+1|Trend+2|Trend+3请注意,调用data方法需要一个 name 参数(用于显示图例)、一个数据数组和一个用十六进制表示的颜色。我们不需要考虑这些参数的格式正确性:库本身会处理这种复杂的问题。

图表的大小、名称和方向(垂直或者水平)在 BarChart 类实例化的时候就给定了:

BarChart.new('800x200', 'Bar Chart', :vertical)再说一遍,库会生成正确的参数,省去了我们的麻烦。调用to_url会返回 URL,可以直接嵌入页面中。

尽管是一个相对年轻的 gem,gchartrb 却惊人的完备。它不但支持线形图、饼图和柱状图,就连 Venn 图和散点图都可以支持。所有生成图表都可以通过渐变、背景、填充、条纹和多色图例进行美化。可以通过访问官方站点来获取更加详尽的文档。

总结

Google 的图表 API 是一个惊人的工具,gchartrb 则提供了一个简明的封装使其更加易用。现在我们可以在 Rails 应用当中生成图表,而不需要编译那些琐碎的附加软件了。这样真酷!

查看英文原文: Intro to Google Charts and gchartrb

2008-06-29 18:413460
用户头像

发布了 80 篇内容, 共 19.9 次阅读, 收获喜欢 5 次。

关注

评论

发布
暂无评论
发现更多内容

【论文速读】| ARVO: 开源软件可重现漏洞的全景图

云起无垠

技术分享丨使用 Knowledge Bases for Amazon Bedrock 制作 RAG 工具

伊克罗德信息科技

大数据 AWS Amazon Bedrock

智能BI新突破,看思迈特新品背后的第二增长曲线!

ToB行业头条

第65期 | GPTSecurity周报

云起无垠

【行业知识】餐饮业怎么定义?需要堡垒机吗?

行云管家

等保 堡垒机 餐饮

海大集团的可观测平台建设实践

秦晓辉

监控 可观测性 Prometheus Nightingale Flashcat

工作太忙没时间学习,怎么办?

老张

职场成长 认知 学习成长

TiDB DR-Auto-Sync 同城双中心高可用实践丨银行核心背后的落地工程体系

TiDB 社区干货传送门

好多kafka难题啊,看看其中的化解之道

王中阳Go

Go kafka 面试 面经

是什么拖慢了医疗云桌面的部署进程?

上海锐起科技

音乐创作软件Ableton Live 11 Suite for Mac

Mac相关知识分享

Mac软件

在线文库网站程序系统源码/app/小程序开发定制

网站,小程序,APP开发定制

保定等保测评机构有吗?在哪里?

行云管家

网络安全 等保 堡垒机 保定

神策SDK不支持Windows客户端全埋点,怎么实现用户统计分析?

ClkLog

C++客户端 C#客户端 C++客户端用户分析 C#客户端用户分析 windows客户端用户分析

小城酒店也要数智化,火山引擎数据飞轮能带去哪些想象?

字节跳动数据平台

大数据 数字化转型 云服务 数据平台 数据飞轮

在数小时内构建 CRM:你需要了解的顶级无代码/低代码工具

NocoBase

低代码 CRM 无代码

强大的项目管理软件OmniPlan pro for Mac

Mac相关知识分享

项目管理软件 Mac软件

ps 2022下载:Photoshop 2022 (Win&Mac) 软件直装版下载

你的猪会飞吗

mac软件下载 PS2022下载 ps 2022破解下载

RPA项目:RPA工作原理及其应用领域

八爪鱼采集器︱RPA机器人

RPA 自动化 RPAxAI

免费试听 | AI自动化副业创收班手把手带你提升副业收益

测试人

软件测试

智能未来:低代码与AI如何重塑企业应用开发

天津汇柏科技有限公司

低代码 企业级应用程序开发 AI 人工智能

【论文速读】|RO-SVD:一种用于 AIGC 应用的可重构硬件版权保护框架

云起无垠

海外广告投放成功的关键点有哪些?

IPIDEA全球HTTP

类似咸鱼/转转闲置二手商品交易回收商城系统源码定制开发搭建

网站,小程序,APP开发定制

YETUADMIN 野兔二手交易系统 ThinkPHP8

工作 6 年,@Transactional 注解用的一塌糊涂

程序员小富

Java 事务回滚

人工智能图像编辑软件Topaz Gigapixel AI for Mac

Mac相关知识分享

人工智能 图像编辑

Python IDE 编程工具JetBrains pycharm pro 2024 for mac激活版

Mac相关知识分享

编程 开发 Mac软件

JavaScript 开发工具WebStorm 2024 for Mac激活版

Mac相关知识分享

Mac 软件 集成开发环境

mac电脑可以玩的Red Alert红色警戒:红警2 for Mac合集

你的猪会飞吗

红色警戒 Mac游戏下载 红警游戏下载

挖掘大模型行业落地潜力,火山引擎发布AI创作者大赛

Geek_2d6073

Google图表及gchartrb初探_Ruby_Matthew Bass_InfoQ精选文章