//Google Chart API
参考:
<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World" />
#图表尺寸
chs=<像素宽度>x<像素高度>
例如:chs=300x200
尺寸过小时,饼图将仅显示部分图表。饼图建议尺寸:
* 二维饼图:宽度约为高度两倍。
* 三维饼图:宽度约为高度两倍半。
#图表数据
图表数据有三种格式:文本编码、简单编码和扩展编码
文本编码
chd=t:<数值字符串>
<数值字符串>为0.0至100.0的浮点数、-1(负一)和|(竖线)
示例:chd=t:10.0,58.0,95.0|30.0,8.0,63.0
含义如下:
* 浮点数字0.0= 0,以此类推100.0= 100。
* 负一-1表示空值。
* 竖线|为数据分组符号。
简单编码
chd=s:<数值字符串>
<数值字符串>可包含a-z、A-Z、0-9、_和,
示例:chd=s:Hello
含义如下:
* 大写字母A= 0、B= 1,以此类推,Z= 25。
* 小写字母a= 26、b= 27,以此类推,z= 51。
* 数字0= 52,以此类推,9= 61.
* 下划线_表示空值。
* 逗号,为数据分组符号。
扩展编码
chd=e:<数值字符串>
<数值字符串>为成对出现的A-Z、a-z、0-9、连字符-、小数点.、下划线_或逗号,
含义如下:
* AA= 0、AZ= 25、Aa= 26、Az= 51、A0= 52、A9= 61、A-= 62、A.= 63、BA= 64、BZ= 89、.A= 4032、.Z= 4057、.a= 4058、.z= 4083、.0=
4084、.9= 4093、.-= 4094、..= 4095。
* 两个下划线__表示空值。
* 逗号,为数据分组符号。
#图表类型
目前可用的图表类型:折线图、谱线图、柱状图、饼图、维恩图、散点图和仪表图
折线图
cht=<折线图类型>
<折线图类型>可选择lc或lxy。
* lc类型图表,多组数据将绘制为多条数据线。
* lxy类型图表每条数据线需要两组数据。
谱线图
cht=ls
柱状图
cht=<柱状图类型>
<柱状图类型>可选择bhs、bhg、bvs和bvg。
多组数据将绘制为层叠柱状图。
饼图
cht=<饼图类型>
<饼图类型>可选择p或p3。
仅支持一组数据,后续数据将被忽略。
维恩图
cht=v
示例:cht=v&chd=t:100,80,60,30,30,30,10
一组数据包含以下七个数值:
* 前三个数值表示 A、B、C 的相对大小关系。
* 第四个数值表示 A 和 B 重叠数值。
* 第五个数值表示 B 和 C 重叠数值。
* 第六个数值表示 A 和 C 重叠数值。
* 第七个数值表示 A、B、C 重叠数值。
散点图
cht=s
仪表图
cht=gom
#颜色
chco:指定每个数据集的颜色
使用 6 位十六进制颜色参数,格式RRGGBB
示例:chco=ff0000,00ff00,0000ff
#区域填充、背景颜色
chf=<bg 或 c><填充类型>
<填充类型>可选实心填充、线性渐变和线性条纹。
s代表实心填充 格式:chf=<bg 或 c>,s,<颜色>|<bg 或 c>,s,<颜色>
示例:chf=bg,s,efefef|c,s,000000
lg代表线性渐变 格式:chf=<bg or c>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n>
示例:chf=c,lg,0,76A4FB,1,ffffff,0|bg,s,EFEFEF
ls代表线性条纹 格式:chf=<bg or c>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n>
示例:chf=c,ls,0,CCCCCC,0.2,FFFFFF,0.2
说明:
<bg 或 c>中bg表示背景,c表示图表区域。
<颜色>为十六进制颜色RRGGBB参数。
<angle>设定填充旋转角度,值在0垂直与90水平之间。
<offset>表示偏移量,必须在0和1之间,0表示最靠左端,1表示最靠右端。
<width>必须在0和1之间,1表示完整宽度。重复填充条纹直至达到完整宽度。
#标注
标注类型:图表标题、图表图例、饼图标注和多轴标注
图表标题:chtt=<图表标题>
使用加号+代表空格,竖线|表示换行,chts=<颜色>,<字号>。
示例:chtt=Site+visitors+by+month|January+to+July&chts=0000FF,20
Result:Site visitors by month
January to July
图表图例:chdl=<第一组数据图例>|<第 n 组数据图例>
图例chdl与颜色属性chco联合使用。
示例:chdl=First|Second|Third&chco=FF0000,00FF00,0000FF
饼图标注:chl=<标注1>|....|<标注n>
示例:chl=May|Jun|Jul|Aug|Sep|Oct
多轴标注:多轴标注可用于折线图、柱状图和散点图。
坐标轴类型
chxt=<坐标轴1>,....,<坐标轴n>
可用坐标轴类型:
x= 底部 x 坐标轴
t= 顶部 x 坐标轴
y= 左侧 y 坐标轴
r= 右侧 y 坐标轴
示例:chxt=x,y,r,x,t
坐标值
chxt参数中的坐标轴将拥有一个索引值,第一个坐标轴索引值为 0,第二个为 1,以此类推。坐标轴索引值必须正序排列。
chxl=<坐标轴索引值>:|<坐标值 1>|<坐标值 n>|...|<坐标轴索引值>:|<坐标值 1>|<坐标值 n>
示例:chxt=x,y,r,x&chxl=0:|Jan|July|Jan|July|Jan|2:|A|B|C|3:|2005|2006|2007 (y 轴未设置)
坐标值位置
chxp=<坐标轴索引值>,<坐标值1位置>,<坐标值n位置>|....|<坐标轴索引值>,<坐标值1位置>,<坐标值n位置>
示例:chxt=x,y,r&chxl=1:|min|average|max&chxp=1,10,35,75|2,0,1,2,4
坐标值范围
chxr=<坐标轴索引值>,<坐标值起始值>,<坐标值终止值>|....|<坐标轴索引值>,<坐标值起始值>,<坐标值终止值>
示例:chxt=x,y,r&chxr=0,100,500|1,0,200|2,1000,0
标注样式
chxs=<坐标轴索引值>,<颜色>,<字号>,<对齐方式>|....|<坐标轴索引值>,<颜色>,<字号>,<对齐方式>
示例:chxt=x,x&chxl=1:||Feb|Mar||0:|1st|15th|1st|15th|1st&chxs=0,0000dd,10|1,0000dd,12,0
#样式
柱形、间隔宽度
chbh=<柱形宽度>,<(可选)组内柱形间隔宽度>,<(可选)组间间隔宽度>
示例:cht=bvg&chbh=10,5,15
折线样式
chls=<数据线 1 粗细>,<数据线 1 线段长度>,<数据线 1 线段间隔长度>|....|<数据线 n 粗细>,<数据线 n 线段长度>,<数据线 n 线段间隔长度>
示例:chls=3,6,3|1,1,0
网格线
图表API默认使用虚网格线。
chg=<x 轴步长>,<y 轴步长>,<线段长度>,<线段间隔长度>
示例:chg=20,50,1,5
形状标记
折线图和散点图有效
chm=<形状类型>,<颜色>,<数据组索引>,<数据点>,<尺寸>|....|<形状类型>,<颜色>,<数据组索引>,<数据点>,<尺寸>
<形状类型>为以下字符:
a代表箭头(Arrow)。
c代表十字(Cross)。
d代表菱形(Diamond)。
o代表圆圈。
s代表正方形(Square)。
v代表 x 轴至该点的垂直线。
V代表穿过该点的垂直线。
h代表穿过该点的水平线。
x代表十叉。
<数据点>为浮点数,指定形状所在数据点,1为第一个数据,2为第二个数据,以此类推。小数代表数据点间位置。
<尺寸>设定形状像素大小。
示例:chm=c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|d,80C65A,0,2.0,20.0|h,3399CC,0,7.0,1.0
区间填充
折线图和散点图有效
chm=<r 或 R>,<颜色>,<任意值>,<开始值>,<终止值>|....|<r 或 R>,<颜色>,<任意值>,<开始值>,<终止值>
说明:
<r 或 R>中r代表水平填充,R代表垂直填充。
<颜色>为十六进制颜色值。
<任意值>未使用,请使用0来忽略该值。
<开始值>:
o 水平填充中,垂直方向最低端为0.00,最顶端为1.00。
o 垂直填充中,水平方向最左侧为0.00,最右侧为1.00。
<终止值>:
o 水平填充中,垂直方向最低端为0.00,最顶端为1.00。
o 垂直填充中,水平方向最左侧为0.00,最右侧为1.00。
示例:chm=r,E5ECF9,0,0.75,0.25|R,FF0000,0,0.1,0.11
数据区块填充
设定数据区块填充
chm=b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>|....|b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>
说明:
<颜色>为十六进制颜色值。
<开始折线索引值>设定颜色填充起始折线。为chd参数中数据组索引值,0为第一组数据,1为第二组数据,以此类推。
<终止折线索引值>设置颜色填充终止折线。为chd参数中数据组索引值,0为第一组数据,1为第二组数据,以此类推。
<任意值>未使用,请使用0来忽略该值。
示例:chd=s:99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA&chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0
参考:http://labs.cloudream.name/google/chart/api.html
分享到:
相关推荐
在MATLAB中,`m2googlechart`是一个用于创建并展示谷歌图表(Google Charts)的工具,它允许用户通过MATLAB代码生成Java类,进而利用谷歌图表API进行数据可视化。这个工具对于那些需要在MATLAB环境中进行数据分析和...
标题“Google Chart 不需要联网”可能意味着在特定情况下或通过特定方法,我们可以使用Google图表API创建图表,即使没有网络连接也能实现。这通常涉及到离线使用Google图表库或者提前下载必要的资源。接下来,我们将...
Google Chart API是Google提供的一个服务,允许开发者动态生成图表。通过API,用户可以创建各种类型的图表,包括折线图、柱状图、饼图、维恩图和散点图等,还可以调整图表的尺寸、颜色和图例等。Google Chart API...
在IT行业中,Google Chart是一个非常强大的工具,它允许开发者生成各种各样的图表,如柱状图、折线图、饼图等,以便于数据可视化。然而,通常情况下,Google Chart需要连接到互联网来加载其JavaScript库和服务。但在...
Ext用户扩展控件——Google Chart,是一种将Google的图表服务与EXTJS框架相结合的技术,用于在Web应用中创建丰富的、动态的数据可视化效果。EXTJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,而Google ...
Google Chart API 是一个强大的工具,能够帮助开发者轻松创建包括二维码在内的各种图表。本文将深入讲解如何利用Google Chart API来生成二维码,并结合前端技术实现用户交互。 首先,让我们了解什么是Google Chart ...
"Ext.ux.GoogleChart"就是这样一个插件,它允许开发者在ExtJS应用中集成Google Charts,以展示各种复杂的数据可视化图表。 Google Charts 是Google提供的一种免费服务,它提供了多种图表类型,如柱状图、折线图、...
在本项目中,我们将探讨如何利用Google Chart API在ASP.NET环境中创建柱状图,同时结合jQuery来处理前端用户界面,并从SQL Server数据库中获取和格式化数据为JSON格式。 **Google Chart API** 是Google提供的一项...
Google Chart API是一种功能强大的在线图表生成工具,它允许用户通过简单的URL请求,轻松创建各种类型的图表,包括但不限于折线图、柱状图、饼图、维恩图和散点图等。这一API的使用非常简便,开发者只需要按照特定的...
### Google Chart API 开发指南知识点概述 #### 一、引言 Google Chart API 是一款功能强大的工具,允许开发者通过简单的 URL 请求动态生成各种类型的图表。这些图表可以嵌入到网页中,为用户提供直观的数据可视化...
页面不用加载google服务器上的js文件,直接放在本地使用,加快加载速度
页面不用加载google服务器上的js文件,直接放在本地使用,加快加载速度
这个"googleChart:googleChart"项目可能是关于如何利用HTML来嵌入和操作谷歌图表的示例或教程。在HTML中,我们可以利用`<script>`标签引入谷歌图表的API库,并通过JavaScript代码来生成和定制图表。 首先,我们需要...
页面不用加载google服务器上的js文件,直接放在本地使用,加快加载速度
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); // 配置选项 var options = { title: '我的图表', width: 600, height: 400 }; // 绘制图表 chart.draw(data, ...
一个脚本 m 文件和一个 Java 类,用于为 Google Chart API 生成 Matlab 数据的线图。 还包含一个函数 m 文件,可用于在纯 Matlab 中为 Google Chart API 加密数据。
GChart是Google Chart APIPHP库。 Google Chart API可让您动态生成图表。 但是,使用起来并不方便。 GChart使您可以更轻松地在PHP页面中插入Google Chart。
Api-google-chart.zip,google图表api web组件google图表,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。通过提取实现并将数据放弃到对象中,api简化了编程。
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...
Backbone.GoogleChart Google Charts 支持您的 Backbone 应用程序。什么? Backbone.GoogleChart基本上是一个Backbone.View ,它以“骨干”风格包装了 GoogleChart API依赖关系包括什么? src/backbone/GoggleChart....