http://blog.sina.com.cn/s/blog_605428b90100dllw.html
Google Chart学习文档
Googlechart主要通过简单地发送一条URL来生成图表,调用者的主要工作是构建这些URL,该URL最主要有以下三个参数:图表的类型、图表的大小和图表的数据。图表的类型由“cht”参数指定。图表大小用chs指定,包括图表的长和宽,用整数来表示。图表数据用chd表示,使用google chart只需要构建一个url就可以了,例如建立一个pie状图,就可以直接GoogleChart.pie(['1997',10], ['1998',20],['1999',40],['2000',30]).to_url就可以了,
但是现在还存在两个问题:
第一:有时候参数很多,对于数据量很大的图标来说,要写很长的字符串,构建这样的URL就很不方便。
第二:构建这种图其实在很多地方有重复使用,而且只是小数参数不一样,我们就要重复写很多遍相同的语句。
但是不用担心,DEEpark jois已经封装了该api,他的gem叫做gchartrb,使用它能够很简便的画出图标,那么首先第一步就是安装改gem:gem install gchartrb;一下就是一些demo的代码:
(1)、venn图,例如小黄有50个苹果,小黑有40个苹果,小红有30个苹果,小黄和小黑的交集是20,小黑和小红的交集是10,小红和小黄的焦急是5,通过这些数据得出代表小黄、小黑和小红三个人的圆圈,面积代表苹果的个数,圆圈交集代表他们之间的交集
代码如下:
require ‘rubygems’
require ‘google_chart’
def venn_diagram
#第一个参数是大小,第二个参数是title允许为nil
GoogleChart::VennDiagram.new("400x400", 'Venn Diagram') do |vd|
vd.data "小黄", 50,'ffff00'
vd.data "小黑", 40, '000000'
vd.data "小红", 30, 'ff0000'
vd.intersections 20, 10, 5
@chart = vd.to_url
end
end
..................................
分享到:
相关推荐
使用Google Chart API,用户可以根据提供的API参考文档自定义许多细节,例如图表的颜色可以通过参数如`chco`来指定。此外,还可以对图表的样式进行设置,比如为图表添加坐标轴、网格线、标签等元素。 在请求中,...
本文档旨在为开发者提供详细的 API 参考和参数说明,帮助他们更有效地使用 Google Chart API。 #### 二、API 使用方针与概述 - **使用方针**:虽然 API 不限制每日请求次数,但如果请求量过大(超过 250,000 次/天...
这个"googleChart:googleChart"项目可能是关于如何利用HTML来嵌入和操作谷歌图表的示例或教程。在HTML中,我们可以利用`<script>`标签引入谷歌图表的API库,并通过JavaScript代码来生成和定制图表。 首先,我们需要...
GoogleChart chart = new GoogleChart(); chart.ChartType = ChartType.Bar; chart.Data.Add(new[] { "Item1", "Item2", "Item3" }); chart.Data.Add(new[] { 10, 20, 30 }); chart.Width = 500; chart.Height = 300...
Google Chart工具指令模块用于AngularJS安装安装凉亭bower install angular-google-chart --save 目标包装程序指令贡献有兴趣为Angular Google Chart做贡献吗? 凉爽的! 请查看 ,以获取提出问题和提交拉取请求的...
在本文中,我们将深入探讨基于AngularJS的前端项目——Angular-Chart.js,它是一个将流行的Chart.js库...通过学习和掌握Angular-Chart.js,你可以轻松地在AngularJS项目中创建出各种美观且响应式的图表,提升用户体验。
虽然ASPChart.Net0.8是一个功能强大的图表组件,但随着技术的发展,出现了更多高级的图表库,如Google Charts、Highcharts、DevExpress等,它们提供了更丰富的图表类型和交互功能,可以作为ASPChart.Net0.8的替代品...
1. 选择合适的Chart库:市面上有许多开源和商业的Chart库,如Microsoft Chart Controls、Google Charts、Highcharts等,根据项目需求和技术栈选择合适的一个。 2. 添加引用:将选定的Chart库引入项目,并配置相应的...
在"jQuery实现的功能无比强大的google图表效果"这个主题中,我们将学习如何整合这两者。首先,我们需要在HTML文件(如index.html和about.html)中引入jQuery库(jquery.min.js)和Google图表插件(jquery.gvChart-...
- **Android应用**:如果HelloChart支持Android,那么可以将它打包进APK,发布到Google Play或其他Android应用市场。 6. **文档和示例**: - **API文档**:HelloChart可能提供详细的API文档,解释各个类和方法的...
### Google Earth Engine (GEE) 图表功能详解 ... - `chartType`:要生成的图表类型,例如'ScatterChart'(散点图)、'LineChart'(折线图)和'ColumnChart'(柱状图)等,更多类型可参考[Google Chart API文档]...
"一个不错的Chart控件资料"这个标题表明这是一个关于Chart控件的资源集合,可能是教程、示例代码或者API文档,适合初学者入门。 Chart控件通常包含多种图表类型,如折线图、柱状图、饼图、散点图等,每种类型都有其...
1. **AngularJS**: AngularJS是Google维护的一个开源JavaScript框架,它遵循MVC(模型-视图-控制器)设计模式,使得前端开发更加结构化。该项目利用AngularJS的数据绑定、指令系统以及服务等特性,实现了图表与数据...
1. **Flutter框架**:`fl_chart`是基于Google的Flutter框架开发的,Flutter是一款跨平台的UI工具包,允许开发者使用Dart语言编写代码,一次编写,多平台运行(包括iOS和Android)。 2. **图表类型**: - **折线图...
【文件名称列表】"google-chart-offline-master" 暗示这是项目的主分支,通常包含项目的源代码、示例、文档和其他资源。具体结构可能如下: 1. **dist** 文件夹:包含预编译和打包后的JavaScript文件,可以直接在...
Web Chart Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。 ... • AmCharts - AmCharts ... GoogleChart - http://www.javaeye.com/topic/219853
1. 利用软件工具:如Microsoft Word、Google Docs或专门的项目管理软件,提供丰富的模板选择和协同编辑功能。 2. 版本控制:使用Git等版本控制系统,追踪文档修改历史,便于回溯和比较。 3. 模板库:建立项目文档...
5. **Google Web Toolkit (GWT) 集成**:"google-webtoolkit-OFCGWT"表明该库还可以与Google Web Toolkit结合使用,允许GWT开发者利用其丰富的Java API来生成和操作图表,从而避免直接编写JavaScript代码。...
很全面的Ace Admin1.3官方文档,包含有最全面的组件及例子,适合急需使用该技术开发的人。 响应式Bootstrap网站后台管理系统模板ace admin,非常不错的轻量级易用的admin后台管理系统,基于Bootstrap3,拥有强大的...
8. **API参考**:GoogChart提供了详细的API文档,包括方法、属性和事件,开发者可以通过查阅这些文档来深入学习和利用其功能。 9. **与其他技术结合**:GoogChart可以轻松与jQuery、AngularJS、Vue.js等前端框架...