Google Chart API指南(3)

前面部分参见Google Chart API指南(2)
图表尺寸
使用chs=<width in pixels>x<height in pixels>指定图表尺寸,例如,chs=300×200生成300像素宽和200像素高的图表。
图表的最大可能区域是300000像素。最大极限的高度或宽度是1000像素,最大尺寸的例子是1000×300、300×1000、600×500、500×600、800×375和375×800。
图表数据
下面的编码格式是有用的:

  • 简单的编码有62种不同值的精度。允许每个数据点五个像素,对于折线图和条形图达到大约300像素是足够的。简单的编码适合于所有其他类型的图表而不管其大小。
  • 文本编码有1000种不同值的精度,使用在0.0和100.0之间的浮点数字。允许每个数据点五个像素,整数(1.0、2.0,等等)对于折线图和条形图达到大约500像素是足够的。如果需要更高的精度,包括单个的小数位(例如35.7)。文本编码适合于所有其他类型的图表而不管其大小。
  • 扩展的编码有4096种不同值的精度,最好用于需要大数据范围的大图表。

注意:文本编码需要几个字符来编码单个的数据点。简单的编码是最有效的,只为每个数据点使用一个字符。
简单的编码
使用chd=s:<chart data string>指定简单的编码,其中<chart data string>包含字符:A到Z、a到z、0到9、下划线(_)和逗号(,)。
注意:

  • 大写字母A = 0、B = 1 …… Z = 25 。
  • 小写字母a = 26、b= 27 …… z = 51。
  • 零 (0) = 52 …… 9 = 61。
  • 使用下划线(_)指定忽略的值。
  • 如果有多组数据,使用逗号(,)分隔每一组。

例如,两组数据:chd=s:ATb19,Mn5tz,其中在每一个数据组中 — A代表0,T 代表19,b 代表27,1 代表53,9 代表 61。
注意:对于简单的编码,Chart API在图表的底部使用值0绘制点,在顶部为61,沿着y轴均匀展开所有其他值。
文本编码
使用chd=t:<chart data string>指定文本编码,其中<chart data string>由从0(0.0)到100.0的浮点数、-1和管道字符(I)组成。
注意:

  • Zero (0.0) = 0, 1.0 = 1 and so on up to 100.0 = 100.
  • 零(0.0)=0,1.0=1…….直到100.0=100。
  • 使用-1指定忽略的值。
  • 如果有多组数据,使用管道字符(I)分隔每组数据。

例如:chd=t:10.0,58.0,95.0|30.0,8.0,63.0
注意:对于文本编码,Chart API在图表底部使用值0绘制点,在顶部为100.0,沿着y轴均匀展开所有其他值。
扩展的编码
使用chd=e:<chart data string>指定扩展的编码,其中<chart data string>包含成对字符: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, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
    .A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
  • 使用两个下划线(__) 指定忽略的字符。
  • 如果有多组数据,使用逗号(,)分隔每组数据。

注意:对于文本编码,Chart API在图表底部使用值0绘制点,在顶部为4095,沿着y轴均匀展开所有其他值。
编码数据的JavaScript代码片断
编程转换现实数据成Chart API数据比手工转换更容易。
下面的JavaScript代码片断编码数据组成简单的编码。必须提供正数的数组作为数据组,不是正数的数据组值被编码为使用下划字符(_)的忽略值。
调用simpleEncode函数传递数组(values)和数组中的最大值(maxValue)。对于折线图和条形图,如果希望在最大值和图表顶部之间有空间,则使maxValue比数组中的最大值更大。
var simpleEncoding = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789′;

function simpleEncode(values,maxValue) {

var chartData = ['s:'];
  for (var i = 0; i < values.length; i++) {
  var currentValue = values[i];
  if (!isNaN(currentValue) && currentValue >= 0) {
  chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
  }
  else {
  chartData.push(’_');
  }
  }
return chartData.join(”);
}
间隔尺寸的引导线
当心不要高估图表所需要的数据点数字。例如,要显示过去10年期间Britney Spears是如何流行,汇总每天搜集的查询导致多于3600个值。这将在URL中传递太多的数据,同时以这个间隔尺寸绘制图形没有意义:在1024像素宽的屏幕中一个数据点在屏幕中大约是一个像素的四分之一。正如下面的例子所演示的。
200×100的图表,具有20个数据点(每个数据点10像素):
GooglechartAPISample22
40个数据点(每个数据点5像素):
GooglechartAPISample23
80个数据点(每个数据点仅2.5像素):
GooglechartAPISample24
待续……


提示:您可以在评论中使用HTML标签,且任何与HTML标签相同的符号都会被理解为HTML标签并以相应的格式显示.如果您的评论中有代码,可以使用相应的标签,例如,如果有VB或VBA代码,则可以使用[vb]标签,即[vb]放置的代码[/vb],这样会很清晰地显示代码.

发表评论