|
简介
Open flash chart 简称OFC，是一个开源的flash报表组件。我们不仅可以免费使用，而且还可以修改源代码，来达到我们想要的效果。客户端在得到数据以后，在FlashPlayer中渲染出报表图。
目前通用的OFC版本为2 Lug Wyrm Charmer，使用actionscript3.0编写，Adobe Flex编译。
open-flash-chart.swf解析传递给它的json文件并按json文件的内容创建对应的图表。传入的Json文件会指定图表的类型，颜色，线条类型等信息。该json文件可以是服务器上通过动态脚本生成的，也可以是本地文件。为了方便在不同环境下生成需要的json文件，作者提供了相应的开发包。在发行包目录下我们可以找到python，dot net ，php，和perl等的开发包。
用Open flash chart创建图表的过程很简单——按照规格生成json,然后传递给open-flash-chart生成图表。
官网网址：http://teethgrinder.co.uk/open-flash-chart/
1、? 动手实践
1.1、获取OFC
在OFC官方网站首页的下方可以找到跳转到下载页面的超链接。也可以直接使用下面的地址跳转到下载页面。
http://sourceforge.net/projects/openflashchart/files/open-flash-chart/
在下载页面我们可以看到从1.9.1~2 Lug Wyrm Charmer等任意版本。最后一版的更新时间是2009-07-27，这已经是很久远的事了，所以建议你选择最高版本。解压下载后的文件我们可以看到如下目录结构。
这里需要重点关注如图划红线的文件夹。其他文件夹是针对特殊语言的帮助类，需要那个可以自己研究一下。Data-files文件夹里面存放着大量的例子，遗憾的是例子本身无法执行，例子中的js代码还是1.x版本时编写的，并不能运行在2中，因为依赖的第三方js组件也升级了。但是这个文件夹的实例数据还是很值得研究一下的。Js文件夹中保存着OFC依赖的第三方JS组件swfobject，关于这个组件的用途会在后面提到，如果有兴趣请查阅更多相关资料了解。Open-flash-chart文件夹保存着OFC的源代码文件。Open-flash-chart.swf文件是编译后的文件，也就是我们实际使用时需要引入到工程目录中的文件。
1.2、swfobject
swfobject是一个开源js组件，主要为在html中嵌入flash提供支持。一个最大的好处是把flash嵌入IE的时候，不会出现“单击激活此控件”的提示。
Open flash chart 1.x版本采用swfobject1.5作为flash引入方式。到了open flash chart 2版本时，swfobject也已经升级到了2.x版本，并且swfobject2.x与之前版本的设计完全不同。所以在使用时需要注意这点区别。直接在open flash chart官网下载到的版本2压缩文件中的例子代码中却是用的swfobject1.x的写法，而文件包中包含的swfobject是2.1版本的，所以无法正常运行。
1.3、一个极简的柱状图
首先创建一个WEB工程，将swfobject.js和open-flash-chart.swf两个文件复制到工程的根目录,这里以JAVA为例，工程目录如下图：
?
?
编辑index.jsp文件，代码如下：
| <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ? <head> ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ??? <title>柱状图</title> ? </head> ? ? <body> ??? <h1>柱状图</h1> ??? <div id="bar"> ??? <p>如果你看到这段文字，说明你的浏览器不支持flash或者你的程序有问题！</p> ??? </div> ?? <script type="text/javascript" src="swfobject.js"></script> ??? <script type="text/javascript"> ???? ?? ?swfobject.embedSWF( ???? ?? ??? "open-flash-chart.swf", ???? ?? ??? "bar", ???? ?? ??? "500px", ???? ?? ??? "9.0.0", ???? ?? ??? "expressInstall.swf", ??????????? { "data-file": "bar.js" } ????????? ); ??? </script> ? </body> </html> |
代码比较简单，重点是，引入swfobject.js文件。调用swfobject.js中定义的静态方法embedSWF加载open-flash-chart.swf文件并设置参数。EmbedSWF的参数意义依次是：
1，flash文件地址，
2，2，flash文件加载到区域的外层标签ID，
3，flash区域的宽度，
4，flash区域的高度，
5，比对浏览器flash播放器最低版本是否低于设定版本。
6，指定的flash文件用于播放器升级。
7，open-flash-chart绘制报表需要的数据。
接下来在工程根目录下创建bar.js文件，并录入如下数据：
| { ??? "elements":[{ ?????? "type":"bar", ?????? "values":[9,6,7,9,5,1] ??? }] } |
?
数据的意义会在后面讲解，请先收起你的好奇心。
OK,将工程部署到服务器上访问index.jsp页面，一幅很专业的图标就呈现在你的面前啦。是不是很容易呢！
?
2、OFC数据结构
通过上一章的例子我们知道，Openflash chart要求传入的是一个json对象，因此json文件的最外围必须是{}其他内容都定义在该对象内。在根对象的下面定义了以下对象/属性：
| { ??? 'title':{}, ??? 'y_legend':{}, ??? 'y2_legend':{}, ??? 'x_legend':{}, ??? 'y_axis':{}, ??? 'y_axis_right':{}, ??? 'x_axis':{}, ??? 'bg_color':'', ??? 'tooltip':{}, ??? 'radar_axis':{}, ??? 'elements':[] } |
这些属性会在后面详细讲解。在这里首先需要了解以下OFC展现时的图标结构与一级属性的对应关系。下图是将一幅图标分隔成了若干区域，每一个区域的设置通过一个一级属性来完成。
下面我们通过改善之前完成的柱状图来学习这些属性。
注意：所有属性中涉及到的字符串采用“””双引号，不能使用单引号。
2.1、elements
elements对象是一个chart对象数组，是一级对象中唯一必需的元素，这一点从柱状图例子可以看出。有人会对elements对象时一个chart对象数组不理解，我们可以通过一个小例子帮助理解。首先在之前的bar.js中的elements数组中增加一个数组元素，内容如下：
| { ?????? "type":"line",1] } |
重新访问index.jsp页面，图表变成了柱状图与线图组合而成的复合图表。由此我们可以理解，elements对象时一个chart对象数组的意义了吧。
复合图
接下来给出elements数组中每个chart对象的可选属性。
| 属性名 |
说明 |
| type |
定义chart的类型，最常用的类型有bar（柱状图），pie（饼图），line（线图） |
| alpha |
图形元素的不透明度 0~1之间的数值 |
| colour |
图形元素的颜色值为RBG颜色如#000000 |
| text |
chart的名字，显示于title的下方，chart的上方，靠左对齐。 |
| font-size |
text的字体大小。 |
| values |
数值序列。对应不同的chart类型，values属性内的值会有不同的结构。通常为一个数值数组，每个数值表示一个点。当需要对点的样式进行特别设置时，通过一个对象来描述。 |
| on-click |
定义click事件的回调，可以是一个javascript的方法句柄，也可以是一个url链接 |
| tip |
定义鼠标划过时的提示信息，可以在tip的文本中用预定义的变量调用chart数值，比如#val#表示对应项的值。不同类型的chart提供了不同的预定义变量 |
?
继续扩展之前的例子，在例子中实验alpha，colour，text，font-size，on-click，tip等属性。扩展后的完整数据如下：
| { ??? "elements":[{ ?????? "type":"bar", ?????? "alpha":0.3, ?????? "colour":"#ee0000", ?????? "text":"柱状图", ?????? "font-size":18,1], ?????? "tip":"^_^：#val#", ?????? "on-click":"clickbarfun" ??? },{ ?????? "type":"line", ?????? "alpha": "0.7", ?????? "colour":"#0000ff", ?????? "text":"线图", ?????? "font-size":14, ?????? "values":[10,8,10,2], ?????? "tip":"@_@：#val#", ?????? "on-click":"clicklinefun" ??? } ??? ] } |
改造后的图标如下图所示，注意数据中的 #val#是一个预定义，代表鼠标停留位置所代表的实际值。
请仔细与之前的效果对比，体会这些属性的作用。在线图设置中，我们注意到tip和on-click两个属性的设置并没有起到作用，这是为什么呢? Values属性的内部属性设置留在后面讲解。
2.2、title
图表的标题，位于chart的正上方，内部属性说明如下：
| 属性 |
说明 |
| text |
标题的文字 |
| style |
css样式，定义文字的字体类型，大小，颜色，背景颜色，对其方式等 |
在之前的数据文件中与elements同级添加属性title的定义如下：
| ??? "title":{? ?????? "text":"东边儿我地美人，西边儿黄河流！", ? ????? "style":"{font-size:20px; color:#0000ff; font-family:’宋体’; text-align: center;}" ??? } |
柱状图最上方出现了我们定义的标题。
2.3、y_legend/y2_legend
Y_legend属性定义Y轴的左标题，y2_legend属性定义Y轴的右标题。
| 属性 |
说明 |
| text |
标题的文字 |
| style |
css样式，定义文字的字体类型，大小，颜色，背景颜色，对其方式等 |
这个两个属性对中文支持有BUG，英文则没有问题。具体BUG的表现请通过例子自己体会，将下面的数据添加到柱状图例子中，与title同级。
| ??? "y_legend":{ ?????? "text":"English", ? ????? "style":"{font-size:20px; color:#0000ff; font-family:’宋体’; text-align: center;}" ??? }, ??? "y2_legend":{ ?????? "text":"中文", ? ????? "style":"{font-size:20px; color:#0000ff; font-family:’宋体’; text-align: center;}" ??? } |
?
这里可以清晰的看到左边的标题正确显示出来了，右边的中文标题则没有显示出来，这是一个BUG，至今没有被修复。
2.4、x_legend
x轴的下标题，显示于chart的底部
| 属性 |
说明 |
| text |
标题的文字 |
| style |
css样式，定义文字的字体类型，大小，颜色，背景颜色，对其方式等 |
在柱状图例子数据的基础上添加下属数据，数据与title同级，查看效果。
| ??? "x_legend":{ ?????? "text":"中文", ? ????? "style":"{font-size:20px; color:#0000ff; font-family:’宋体’; text-align: center;}" ??? } |
图略，通过图可以知道x_legend没有y轴标题的中文BUG。
2.5、y_axis/y_axis_right
y轴的轴线定义，分为左轴线和右轴线。属性如下
| 属性 |
说明 |
| stroke |
y轴的粗细，以像素值表示 |
| tick-length |
y轴上每一个节点的刻度线的长度 |
| colour |
y轴线条的颜色 |
| grid-visible |
是否绘制横向网格线，布尔值 |
| grid-colour |
横向网格线的颜色 |
| offset |
true/false,表示y轴是否从0开始，为false时表示从0开始，即没有偏移量；为true时表示有一定偏移量，不直接从0开始。 |
| max |
y轴显示范围的最大值 |
| min |
y轴显示范围的最小值 |
| steps |
y轴分段的步长，默认值为1 |
| labels |
指定y轴的标签。 |
先来体验一下stroke,tick-length,colour,grid-visible,grid-colour,offset,max,min,steps等属性，labels稍等片刻。
老规矩，填充bar.js文件，增加如下内容。
| "y_axis":{ ?????? "stroke":6, ?????? "tick-length":6, ?????? "colour":"#00ff00", ?????? "grid-visible":true, ?????? "grid-colour":"#ff0000", ?????? "offset":false, ?????? "max":100, ?????? "min":0, ?????? "steps":20 ??? }, ?????? "y_axis_right":{ ?????? "stroke":2, ?????? "tick-length":2, ?????? "colour":"#ff0000", ?????? "grid-colour":"#00ff00", ?????? "max":80, ?????? "steps":20 ??? }, |
查看柱状图的变化
请自己修改上面数据的值，不断体会每个属性的意义。
接下来专门研究下labels，这个属性是一个数组，数组内可以包括两种值，一种是字符串，另一种是{}对象。
继续改写bar.js，为y_axis何y_axis_right分别增加一段labels的定义。
| ?????? "labels":{"text":"#val#万","colour":"#DD3030","size":16, ?????????? "labels":[ ????????????? {"y":20,"grid-colour":"#000000","text":"#val#万"}, ????????????? {"y":10}, ????????????? {"y":30}, ????????????? {"y":40}, ????????????? {"y":50}, ????????????? {"y":60} ?????????? ] ?????? } ? ? "labels":[1,2,3,4,10] |
查看柱状图的变化，如果labels的值是一个数值或字符串的数组，则会直接已1为步进作为可读名。如果lables是一个对象，对象里面的定义会冲掉y_axis里面定义的部分属性。如果在lables里面又包含一个lables的定义，这个内层lables是一个自定义刻度数组。数组的每一个元素代表一个自定义可读，且一旦自定义可读，默认刻度将会消失。
?我没有一张Labels内所支持的全部属性清单，所以，这个属性的内容还需要进一步完善。
2.6、x_axis
x_axis的属性与y_axis的属性大部相同，需要注意的是以下属性：
labels:x_axis中的自定义labels时格式与在Y轴上不太一样，在y_axis中每个自定义的都必须定义成一个label对象，而在x_axis中自定label可以是一个String值。比如，下面用四个月份来定义x轴的label:
| “labels”:{“labels”:[“January”,“February”,“March”,“April”]} |
3d:立体x轴的高度数值。如果3d属性的值大于0，将x轴显示成3d样式，并根据输入的数值调整轴的高度。
tick-height:对应于y_axis的tick-length，表示x轴上每一个节点的刻度线的高度。
在bar.js文件中再增加关于x轴的定义
| ??? "x_axis":{ ?????? "3d":4, ?????? "tick-height":6, ?????? "labels":{ ?????????? "colour":"#000000", ?????????? "size":12, ?????????? "labels":["正月", ???????????????????? "#val#月", ???????????????????? "#val#月"] ?????????? } ??? } |
得到柱状图如图：
2.7、bg_colour
整个chart的背景颜色
???????? 在bar.js文件中增加这一句，改变背景颜色。
2.8、tooltip
定义全局的tooltip的样式
| 属性 |
说明 |
| shadow |
true/false，是否需要阴影效果 |
| rounded |
tip边框的圆角的半径 |
| stroke |
tip边框线条的粗细 |
| colour |
Tip边线颜色 |
| background |
背景颜色 |
| title |
tip内容第一行(以<br>标签做分分隔)的css样式 |
| body |
tip内容第二行及以后行的样式 |
| mouse |
数值，具体意义不明，测试当值为1时，鼠标离柱体比较远时也会出现提示。2时，鼠标需要进入柱体区域才提示，3时，不提示，好奇怪的参数。 |
在bar.js文件中增加如下数据
| ??? "tooltip":{ ?????? "shadow":true, ?????? "rounded":90, ?????? "stroke":2, ?????? "background":"#00ff00", ?????? "title":"{font-size:16}", ?????? "body":"{font-size:12}", ?????? "mouse": 2 ??? } |
请自己仔细观察提示信息的变化，更自行修改部分值查看变化。
3、柱状图
3.1、类型
???????????
?
柱状图有很多小类别，每一种提供一种差异化的艺术表现形式。
| 类型 |
说明 |
| bar |
基本柱状图（垂直方向） |
| bar_glass |
玻璃效果柱状图 |
| bar_sketch |
素描效果柱状图 |
| bar_cylinder |
圆柱形效果柱状图 |
| bar_cylinder_outline |
带外轮廓线的圆柱效果柱状图 |
| bar_dome |
圆顶效果柱状图 |
| bar_round |
顶端和底端都是圆形效果的柱状图 |
| bar_round_glass |
带玻璃效果的圆顶效果柱状图（注意，此图的底部是平的） |
| bar_3d |
横截面为方形的立体柱状图 |
| bar_round3d |
横截面为圆形的立体柱状图 |
| bar_filled |
带外轮廓线的柱状图 |
| bar_plastic |
塑料质感柱状图（四角为圆角） |
| bar_plastic_flat |
塑料质感柱状图（底部为直角） |
3.2、扩展属性
在基本的chart对象属性之外，柱状图还包含以下属性
| 属性 |
说明 |
| axis |
left/right，设置图中的数据以左右哪个y轴为基准。左右两边的y轴可能定义在不同的区间，默认的left。 |
3.3、values数组中可配置属性
在柱状图的values数组中每一个值可以是一个数值也可以是一个对象，每个值或者对象代表一个圆柱。迄今我们只使用了直接量的方式。可以通过下面列举的属性为每一个圆柱做个性化设置。
| 属性 |
说明 |
| top |
圆柱最高点的值。在tip属性中可以通过#top#来调用。 |
| bottom |
圆柱最低点的值。在tip属性中可以通过#bottom#来调用 |
| outline_colour |
边框的颜色。当chart类型为bar_filled和bar_sketch时有效 |
| colour |
圆柱的颜色。此颜色设置将覆盖chart对象中的颜色设置 |
| tip |
鼠标划过时的提示信息。用法与chart对象的tip设置想通。此tip设置将覆盖chart对象中的tip设置。 |
| on_click |
click事件的回调。此设置将覆盖chart对象中的on-click设置 |
将bar.js中柱状图的第一个节点从9改为如下数据：
| { ?????????? "top":9, ?????????? "bottom":4, ?????????? "colour":"#009900", ?????????? "tip":"top=#top# bottom=#bottom#" } |
再查看柱状图，观察其变化。其他属性请读者自行实验。
4、水平柱状图
水平柱状图比之垂直柱状图在参数设置方面有一定不同，在这单独对其进行讲解。
水平柱状图的type类型为hbar
读者可以新建一个hbar.js文件，替换之前的bar.js文件引入到index文件中。文件内容如下：
| { ??? "title":{? ?????? "text":"横向柱状图", ??? "y_axis": { "offset": 1,"labels": [ "9月","8月","7月","6月","5月","4月" ,"3月" ,"2月" ,"1月","正月"] }, ??? "elements":[{ ?????? "type":"hbar", ??? ??? "values":[{"right":9},{"right":6},{"right":7},{"right":9},{"right":5},{"right":1}], ?????? "on-click":"clickbarfun" ? ??? } ??? ], ??? "bg_colour":"#ffffff", ??? "tooltip": { "mouse": 2} } |
水平柱状图的大部分属性与垂直柱状图一致，这里我们只讲解不同的地方，或者使用时的注意点。valuees数组里的每个元素都是一个对象{ "right": 4 }，right表示向右延伸的单位值。x_axis与y_axis的定义互换，并且y轴(y_axis)的labels数组必须是倒序排列，如此才能对应上数据。水平柱状图应该总是设置tooltip:{mouse:2}，这样可以纠正一个提示信息错误的问题，用户可以自己在不设置此属性时体会其问题。
5、蜡烛图
蜡烛图，即股票数据分析中常见的K线图，type = candle
蜡烛图与柱状图类似，区别仅仅是类型不同，values数组中可配置属性多了下面两个配置项。
| 属性 |
说明 |
| height |
线图中线的最高点，当chart类型为candle时有效。在tip属性中可以通过#height#来调用。 |
| low |
K线图中线的最低点，当chart类型为candle时有效。在tip属性中可以通过#low#来调用。 |
这里我引用了open-flash-chart压缩包中/data-files/candle.txt作为测试数据。测试数据只需关注values部分的定义区别
| "values" :?? [ ??????? {"high":19,"top":14,"bottom":11,"low":10,"tip":"LOOK<br>#top#,#bottom# = #val#"}, ??????? {"high":15,"top":10,"bottom":5,"low":0}, ??????? {"high":7,"top":7,"bottom":4,"low":3},"top":3,"bottom":6,"low":2},"top":4,"low":2} ??????? ] |
查看蜡烛图的展现效果。
6、堆积图
堆积图，或者称为堆叠柱形图，也是一种柱状图的派生图，type = bar_stack。与柱状图类似。堆积图的values设置于柱状图不同，且堆积图的chart对象中有一个扩展属性。Keys，Keys内部用于定义堆积柱形的每一段的意义。定义内容会显示在text区域。
| 属性 |
说明 |
| colour |
颜色 |
| text |
描述该颜色的意义 |
| font-size |
字号 |
?
下面编辑一个stack.js文件，并替换index.jsp中原数据源配置。数据内容如下：
| { ? "title":{ ??? "text":"堆积图", ??? "style":"{font-size:16px;}" ? }, ? ? "elements":[ ??? { ????? "type": "bar_stack", ????? "keys": [ ??????? {"colour":"#000000","text": "采购费","font-size": 10}, ??????? {"colour":"#ff0000","text": "客户关系维护","font-size": 16}, ??????? {"colour":"#00ff00","text": "租金","font-size": 14}, ??????? {"colour":"#0000ff","text": "奖金","font-size": 12} ????? ], ????? "values" :[ ?????????????????? [{"val":2.5,"colour":"#000000"}, ?????????????????? ?? {"val":5,"colour":"#ff0000"}], ??????????????????? [{"val":2.5, ??????????????????? {"val":5,"colour":"#ff0000"}, ??????????????????? {"val":2.5,"colour":"#00ff00"}], ??????????????????? null, ??????????????????? [{"val":5,"colour":"#0000ff"}] ?????????????????? ] ??? } ? ] } |
结果如下图
?
7、饼图
饼图在openflash chart中只有一种实现，type= pie。
7.1、饼图的可配置属性
在基本的chart对象属性之外，饼图还包含以下与饼图的创建相关的属性：
| 属性 |
说明 |
| colours |
颜色数组，与values顺序对应，定义其在饼图中的颜色 |
| start-angle |
角度值，定义第一个图的起绘位置。默认值为90 |
| animate |
true/false或是对象数组。目前open flash chart实现了两个动画效果，一个是chart生成时的淡入淡出效果，一个是鼠标划过时的弹出效果。当animation的值为true/false时表示是否使用淡入淡出效果，也可以分别设置弹出效果和淡入淡出效果，如： “animate”:[{“type”:”bounce”,”distance”:50},{“type”:”fade”}] |
| gradient-fill |
true/false,是否有从圆心到向外的渐变效果 |
| label-colour |
label的颜色 |
| radius |
圆半径。如果radius的值大于0，饼图的半径将会是固定的，不会随着显示空间的变化而调整大小 |
| no-labels |
true/false,是否显示label |
| tip |
在帮图的tip中，可以通过#val#,#total#和#percent#获取当前项值，所有项的总和，即当前项在总体中所占的比例 |
*Text,font-size和color属性在此无效。
使用如下数据构建一个饼图，尝试修改个参数值，理解参数的用途
| { ? "title":{ ??? "text":"Pie", ??? "style":"{font-size: 30px;}" ? }, ? ? "elements":[ ??? { ????? "type":????? "pie", ????? "colours":?? ["#d01f3c","#356aa0","#C79810","#999999"], ????? "alpha":???? 0.6, ????? "border":??? 2, ????? "start-angle": 35, ????? "animate":true, ????? "gradient-fill":true, ????? "label-colour":"#000000", ????? "no-labels":false, ????? "tip":"#percent#", ????? "values" :?? [2,2] ??? } ? ] } |
图如下：
?
7.2、values数组中可配置属性
在饼图中，values数组中的每个对象代表一块圆饼区域。
| 属性 |
说明 |
| value |
圆角代表的数值 |
| label |
一个数据项的标签值 |
| font-size |
label的字体大小 |
| label-colour |
label的文字颜色 |
| colour |
圆角的颜色。此颜色设置将覆盖chart对象中colours的颜色设置。 |
| tip |
鼠标划过时的提示信息。用法与chart对象的tip设置相同。此tip设置将覆盖chart对象中的tip设置。 |
| on-click |
click时间的回调。此设置将覆盖chart对象中的on-click设置。 |
修改之前数据values数组中第一个数据。
| { ???? "value":2, ???? "label":"(*^__^*) 嘻嘻……", ???? "font-size":16, ???? "tip":"O(∩_∩)O哈哈~", ?? ?"colour":"#ffffff", ?? ?"label-colour":"#000000" } |
?
?
8、线图
线图对应的type取值只有一个line。线图是通过一系列的点及其之间的连线组成的，其样式的设计主要是通过设置不同的点样式和线样式来达到的。
8.1、线图的可配置属性
在基本的chart对象属性之外，线图还包含以下与线图的创建相关的属性：
| 属性 |
说明 |
| width |
连线的宽度 |
| dot-style |
对象类型，定义点样式，有以下属性：
| axis |
left/right，设置图中的数据以左右哪个y轴为基准 |
| type |
点类型，可选的值有：star（星形），bow（蝴蝶型），anchor（多边形），dot（远点，默认隐藏），solid-dot（实心圆点），hollow-dot（空心圆点） |
| dot-size |
点的大小（半径） |
| halo-size |
点与线的过渡区（半径） |
| colour |
颜色 |
| tip |
说明文字 |
| alpha |
不透明度 |
| rotation |
旋转角度，对anchor类型的点有效 |
| sides |
多边形的边数，对anchor类型的点有效 |
| width |
圆的轮廓的宽度，对hollow-dot类型的点有效。 |
|
| line-style |
对象类型，定义线的样式，有以下属性：
| stype |
先类型，可选的取值有：dash（虚线），solid（实线） |
| on |
当线类型为dash时有效，与off配合使用，表明虚线每个实线段的长度 |
| off |
当先类型为dash时有效，与off配合使用，表示虚线每个空闲段的长度 |
|
使用下面的数据帮助我们理解这些属性。
| { ? "y_legend":{ ??? "text":?? "line", ??? "style": "{color: #736AFF;}" ? }, ? ??? "elements":[ ?????? { ?????????? "type":????? "line", ?????????? "colour":??? "#736AFF", ?????????? "width":???? 2, ?????????? "dot-style": { ????????????? "type":"anchor", ????????????? "colour":"#a44a80", ????????????? "dot-size": 6, ????????????? "halo-size":2, ????????????? "alpha":0.5, ????????????? "rotation":45, ????????????? "sides":8, ????????????? "tip":"#val#<br>#x_label#" ?????????? }, ?????????? "line-style": { ????????????? "style":"dash", ????????????? "on":10, ????????????? "off":5 ?????????? }, ?????????? "values" :?? [ ????????????? 1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47, ????????????? 2.40,2] ?????? } ??? ] } |
得到如下线图，请读者自己修改参数查看线图的变化。
???????? ?
?
8.2、线图的values数组中的对象的可配置属性
线图的values数组中的每一个对象代表线图中的一个点。
| 属性 |
说明 |
| value |
点在y轴上的取值。其x轴的取值为其在values数组中的顺序 |
| colour |
圆角的颜色。此颜色设置将覆盖chart对象中的颜色设置 |
| tip |
鼠标划过时的提示信息。用法与chart对象的tip设置相同。此tip设置将覆盖chart对象中的tip设置 |
| on-click |
click事件的回调。此设置将覆盖chart对象中的on-click设置 |
| hollow |
是否为空心 |
另外，这里也可以使用dot-style对象的属性来描述点的样式，并覆盖chart对象中全局的dot-style设置。
尝试替换上面数据中的第一个节点定义了解上述属性。
| ???????????????? { ????????????? ??? "value":1.5, ????????????????? "colour":"#e232b1", ????????????????? "tip":"~~~~", ????????????????? "hollow":false ????????????? } |
?
?
9、雷达图
雷达图，也称为蜘蛛图，在openflash chart 中是一种特殊的线图。其type属性的取值是line，并配合radar_axis使用。
9.1、radar_axis
radar_axis是一个一级属性，它仅适用于雷达图。下面是radar_axis的相关设置属性。
| 属性 |
说明 |
| stroke |
射线刻度轴的粗细，以像素值表示 |
| max |
radar轴显示范围的最大值 |
| min |
radar轴显示范围的最小值 |
| steps |
radar轴分段的步长，默认值为1 |
| grid-colour |
网格线的颜色 |
| colour |
radar轴线条的颜色 |
通过一个下面的配置数据了解这些属性：
| { ? "title":{ ??? "text":"radar 雷达图", ? ? "elements":[ ??? { ????? "type":????? "line", ????? "width":???? 2, ????? "values" :?? [ ??????? 4,9 ????? ] ??? } ? ], ? ? "radar_axis": { ??? "max":???????? 10, ??? "min":???????? 1, ??? "stroke":????? 5, ??? "steps":?????? 2, ??? "colour":????? "#167840", ??? "grid-colour": "#E1AAF5" ? } } |
如图:
9.2、雷达图的可配置属性
在基本的chart对象属性之外，雷达图有一下属性
| 属性 |
说明 |
| hoop |
是否将所有点的连线形成一个闭环。在雷达图中有效 |
请读者自己验证。
10、散点图
10.1、散列图可选的type类型
散点图包括两种类型：type =scatter基本散列图和type =scatter_line：连线散点图
10.2散点图的可配置属性
在基本的chart对象属性之外，散点图还包含以下属性：
| 属性 |
说明 |
| dot-style |
对象类型，定一点的样式，参考线图中dot-style的属性 |
| line-style |
对象类型，定义线的样式，在chart类型为scatter_line时有效，参考线图的line-style的属性 |
| stepgraph |
生成阶跃图，取值可以是horizontal， vertical或为空。当取值为空时，点与点之间画直连线 |
?
10.3散点图的values数组中可配置属性
散点图的values数组中的每一个对象代表散点图中的一个点。
| 属性 |
说明 |
| x |
点的x轴坐标值 |
| y |
点的y轴坐标值 |
| value |
点在y轴上的取值。其x轴的取值为其在values数组中的顺序（最好不用这种方法） |
| colour |
圆角的颜色。此颜色设置将覆盖chart对象的tip设置想通。此tip设置将覆盖chart对象中的tip设置 |
| tip |
鼠标划过时的提示信息。用法与chart对象的tip设置相同。此tip设置将覆盖chart对象中的tip设置 |
这里还可以使用dot-style对象的属性来描述点的样式，并覆盖chart对象中全局的dot-style设置。
是用下面的数据实验:
| { ? ? "elements":[ ??? { ????? "type":????? "scatter_line", ????? "colour":??? "#FFB900", ????? "text":????? "Avg", ????? "font-size": 10, ??? ? /* BUG: if you comment this out no line is drawn? why? */ ??? ? "dot-style": {"type":"solid-dot"}, ??? ? "stepgraph":"horizontal", ????? "values" :?? [ ???????????????????? {"x":-4,? "y":-5,? "tip":"HELLO" }, ???????????????????? {"x":-4,? "y":-2,? "colour":"#FF0000" },? "y":1,?? "dot-size":4}, ???????????????????? {"x":3,?? "y":3,?? "dot-size":5,"type": "hollow-dot"}, ???????????????????? {"x":3.5,"y":3.5,"dot-size":6}, ???????????????????? {"x":4.9,"y":4.9,"dot-size":7} ?????????????????? ] ??? } ? ? ], ? ? "x_axis":{ ??? "offset":? false, ??? "min":???? -5, ??? "max":??? 5/*, ??? "labels":["mon","tue","wed","thur","fri","sat","sun"]*/ ? }, ? ? "y_axis":{ ??? "min": -5, ??? "max": 5 ? }, ? ? "y_legend":{ ??? "text":?? "Time of day", ??? "style": "{font-size: 20px; color: #736AFF;}" ? } } |
得到图像如：
连线散点图从效果上看与线图很相像，他们之间的区别在于，线图不能设置点的x坐标值，其坐标值是该点在数据序列中的位置。
11、区域图
区域图在openflash chart中有一种类型 area，这是一种线图的变体。其实我们要想实现一个区域图可以不是用type = area这种设置也可以达到目的。只要我们在 type = line的线图 chart内增加两个属性设置即可。区域图的其他设置请参照线图。
11.1区域图的可配置属性
| 属性 |
说明 |
| fill |
区域的颜色 |
| fill-alpha |
区域的透明度 |
?
读者可以通过下面的数据体会区域图。
| { ? "title":{ ??? "text":"Area Chart", ? ? "elements":[ ??? { ????? "type":????? "area", ????? "colour":??? "#CC3399", ????? "fill":????? "#343399", ????? "fill-alpha": 0.5, ????? "text":????? "Page views", ????? "width":???? 3, ????? "dot-style": { ????????????? "type":"anchor", ????????????? "sides":3, ????????????? "width":1 ?????? }, ????? "values" : [ ?????? 0,0.37,0.73,1.07,1.36,1.59,1.77,1.87, ?????? 1.89,1.85,1.72,1.53,1.28,0.97,0.63, ?????? {"value" :0.26,"type":"star","colour":"#FF0000","dot-size":10}, ?????? -0.11,-0.48,-0.84,-1.16,-1.43, ?????? -1.65,-1.80,-1.88,-1.89,-1.82,-1.67,-1.46,-1.19,-0.88] ??? } ? ], ? ? "y_axis":{ ??? "min": -2, ??? "max": 2 ? } } |
得到的区域图如下：
读者也可以不是用type =area 而是用普通的line尝试上述属性。
12尾声
本篇文档为作者参考网络上的文档，博客，及open-flash-chart官网和open-flash-chart压缩包内例子总结得到，内容难免会有错误，有确实或者不人性的地方，敬请指正。在学习open-flash-chart过程中，open-flash-chart压缩包中data-files文件夹下的txt文件是已经编辑好的参数例子，非常有价值。
撰写人：ywx
EMAIL: ywxowen999@sina.com
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
