open-flash-chart2的各种效果

1. <pre class="html" name="code"><pre class="html" name="code"><pre class="html" name="code"><pre class="html" name="code">{  
2.   "y_legend":{  
3.     "text":   "Time of day",  
4.     "style": "{color: #736AFF;}"  
5.   },  
6.   
7.   "elements":[  
8.     {  
9.       "type":"line",  
10.       "colour":"#736AFF",  
11.       "text":"Avg. wave height (cm)",  
12.       "font-size":10,  
13.       "width":2,  
14.       "on-show":{  
15.           "type":"shrink-in",   /* 从大变小 */  
16.        /* "type":"fade-in",     逐渐现形 */  
17.        /* "type":"drop",        从上掉落 */  
18.        /* "type":"mid-slide",   以中心线弯曲形成 */  
19.        /* "type":"explode",     从中心弹出 */  
20.        /* "type":"pop-up",      向上弹出 */  
21.           "cascade":1,  
22.           "delay":0.5  
23.       },  
24.       "line-style":{        /* 线的样式 */  
25.           "style":"dash",       /* 虚线类型，默认为 solid */  
26.           "on":10,      /* 实线部分长度 */  
27.           "off":5       /* 空白部分长度 */  
28.       },  
29.       "dot-style":{  
30.           "type":"anchor",  /* 多边形类型 */  
31.           "sides":3,        /* 边的个数 */  
32.           "alpha":1,        /* 透明度 */  
33.           "hollow":true,    /* 是否空心 */  
34.           "background-colour":"#a44a80",    /* 背景色 */  
35.           "background-alpha": 0.4,          /* 背景透明度 */  
36.           "width":2,                        /* 边的粗细 */  
37.           "tip":"type = anchor/nsides = 3/nhollow"      /* 鼠标提示信息 */  
38.       },  
39.       "values" :   [  
40.             1.5,1.69,1.88,2.06,2.21,2.34,2.43,  
41.             2.48,2.49,2.47,2.40,2.30,2.17,2.01,  
42.             1.83,1.64,1.44,1.24,1.05,  
43.             {"value" :0.88, "type":"bow", "dot-size":10},  
44.             {"value" :0.74, "type":"bow", "colour":"#00FF00", "dot-size":12, "hollow":false},  
45.             0.62,0.54,0.50,0.50,0.54,0.61,0.72,  
46.             0.86,1.03,1.22,1.41,1.61,1.81,1.99,  
47.             2.15,2.29,2.39,2.46,2.49,  
48.             {  
49.                 "value" :2.48,  
50.                 "type":"star",      /* 五角星 */  
51.                 "colour":"#FF0000", /* 边颜色 */  
52.                 "dot-size":10,      /* 大小 */  
53.                 "rotation":30,      /* 旋转角度 */  
54.                 "hollow":true,      /* 是否空心 */  
55.                 "halo-size":12      /* 光晕大小 */  
56.             },  
57.             2.44,  
58.             {"value" :2.35, "type":"dot", "colour":"#FF0000"},      /* 普通点，只在鼠标滑过时显示 */  
59.             {"value" :2.23, "type":"solid-dot", "colour":"#00FF00"},    /* 实心点 */  
60.             {"value" :2.08, "type":"hollow-dot", "colour":"#FF00FF"}]   /* 空心点 */  
61.     }  
62.   ],  
63.   
64.   "x_axis":{  
65.     "labels":{  
66.         "rotate": 90,  
67.         "labels":["2:00am","2:10","2:20","2:30","2:40","2:50",  
68.               "3:00am","3:10","3:20","3:30","3:40","3:50",  
69.               "4:00am","4:10","4:20","4:30","4:40","4:50",  
70.               "5:00am","5:10","5:20","5:30","5:40","5:50",  
71.               "6:00am","6:10","6:20","6:30","6:40","6:50",  
72.               "7:00am","7:10","7:20","7:30","7:40","7:50",  
73.               "8:00am","8:10","8:20","8:30","8:40","8:50",  
74.               "9:00am","9:10","9:20"]  
75.     }  
76.   },  
77.   
78.   "y_axis":{  
79.     "max":   3  
80.   }  
81. }</pre><br>  
82. { "title":{ "text":"Pie for you sir?", "style":"{font-size: 30px;}" }, "elements":[ { "type":"pie", "colours":["0x336699", "0x88AACC", "0x999933", "0x666699","0xCC9933", "0x006666", "0x3399FF", "0x993300","0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC","0x663366",  
83.  "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，可以直接指定true启用默认动画效果 */  
84.  { "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",  
85.  /* 标签颜色 */ "start-angle":90, /* 开始旋转角度 */ "no-labels":false, /* 是否显示标签 */ "values":[ 2, 3, {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://www.baidu.com"}, {"value":6.5,"on-click":"my_function"} ] } ]}  
86. <pre></pre>  
87. <br>  
88. { "title":{ "text":"Pie for you sir?", "style":"{font-size: 30px;}" }, "elements":[ { "type":"pie", "colours":["0x336699", "0x88AACC", "0x999933", "0x666699","0xCC9933", "0x006666", "0x3399FF", "0x993300","0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC","0x663366",  
89.  "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，可以直接指定true启用默认动画效果 */  
90.  { "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",  
91.  /* 标签颜色 */ "start-angle":90, /* 开始旋转角度 */ "no-labels":false, /* 是否显示标签 */ "values":[ 2, 3, {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://www.baidu.com"}, {"value":6.5,"on-click":"my_function"} ] } ]}  
92. <pre></pre>  
93. <br>  
94. { "title":{ "text": "Many data lines", "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" }, "y_legend":{ "text": "Open Flash Chart", "style": "{color: #736AFF; font-size: 12px;}" }, "elements":[ { "type": "bar", "alpha":  
95.  0.5, "colour": "#9933CC", "text": "Page views", "font-size": 10, "on-show": { /* 展现样式 */ "type":"pop", /* 弹出方式, pop-up */ /* "type":"pop-up" 向上弹出 */ "cascade":1, /* 不通柱子之间的间隔时间为 1 */ "delay":1.5 /* 延迟时间 */ }, "values" : [900,60,1700,1900,500, { "top":700,  
96.  "bottom":200, "colour":"#A03030", "tip":"#top#<br>hello", "on-click":"#" }, 600,null,1700] }, { "type": "bar_glass", "alpha": 0.7, "colour": "#CC9933", "text": "Page views 2", "font-size": 10, "on-show": { "type":"drop", /* 掉落方式 */ /* "type":"fade-in" 逐渐现形  
97.  */ "cascade":0.9 /* 不通柱子之间的间隔时间为 0.9 */ }, "values" : [400,900,60,700,1900,500,700,1600,900] }, { "type": "bar_3d", "alpha": 0.9, "colour": "#CC99ff", "text": "Page views 2", "font-size": 10, "on-show": { "type":"grow-down", /* 向下生长 */ /* "type":"grow-up"  
98.  向上生长 */ "cascade":0.9 /* 不通柱子之间的间隔时间为 0.9 */ }, "values" : [1800,60,200,40,900,1600,700,900,1500] } ], "x_axis":{ "stroke":2, "tick-height":20, "3d":5, "colour":"#df90d0", "grid_colour":"#00ff00", "labels" : {"labels": ["January","February","March","April","May",  
99.  "June","July","August","Spetember"]} }, "y_axis":{ "stroke": 5, "tick-length": 10, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 2000 }}  
100. <pre></pre>  
101. <br>  
102. <pre></pre>  
103. <pre class="html" name="code"> </pre><pre class="html" name="code">{  
104.   /* 图表标题 */  
105.   "title" : {  
106.     "text" : "Many data lines",         /* 标题文本 */  
107.     "style" : "{font-size: 30px;}"  /* CSS样式 */  
108.   },  
109.   
110.    "is_decimal_separator_comma": 0,     /* (0/1)，是否用逗号替换小数点 */  
111.    "is_fixed_num_decimals_forced": 1,   /* (0/1)，是否强制小数点后面的位数 */  
112.    "num_decimals":3,        /* 精度，即小数点后面的位数，需要配合上面参数一起使用 */  
113.    "is_thousand_separator_disabled": 0,     /* (0/1)，是否使用千位分隔符 */  
114.   
115.   /* X轴标题（X轴下方） */  
116.   "x_legend" : {  
117.     "text" : "x_legend",                /* 标题文本 */  
118.     "style" : "{font-size: 12px; color:#736AFF;}"       /* CSS样式 */  
119.   },  
120.   
121.   /* Y轴标题（Y轴左方） */  
122.   "y_legend" : {  
123.     "text" : "y_legend",                /* 标题文本 */  
124.     "style" : "{font-size: 12px; color:#2F55FF;}"       /* CSS样式 */  
125.   },  
126.   
127.   /* X轴 */  
128.   "x_axis" : {  
129.     "stroke" : 2,                   /* X轴的粗细 */  
130.     "tick-height" : 15,             /* X轴刻度的长度 */  
131.     "colour" : "#df0fd0",           /* 颜色 */  
132.     "grid-colour": "#00ff00",       /* 网格线的颜色 */  
133.     "offset" : 1,                   /* (0/1), 是否根据数据图形和标签的宽度进行延展 */  
134.     "3d" : 0,                       /* 显示3D */  
135.     "steps" : 0.5,                  /* 刻度间隔 */  
136.     "min":0,  
137.     "max":8,  
138.     "labels": {  
139.         "rotate": "vertical",           /* 垂直方向显示标签 */  
140.         "size":13,                      /* 字体大小 */  
141.         "steps": 2,                     /* 整数，标签间隔 */  
142.         "visible-steps": 3,             /* 可见标签间隔，会覆盖上面参数 */  
143.         "align":"center",               /* 旋转的标签居中对齐，默认是较高的一端对其到刻度上 */  
144.         "labels": [  
145.             "January",  
146.             {"text":"February", "visible":true, "colour":"ff0000", "rotate":-60},  
147.             "March",  
148.             {"text":"April","colour":"#00D000"},  
149.             "May","June","July","August","September"]  
150.     }  
151.   },  
152.   
153.   /* Y轴 */  
154.   "y_axis":{  
155.     "stroke":      4,  
156.     "tick-length": 3,  
157.     "colour":      "#d000d0",  
158.     "grid-colour": "#00ff00",  
159.     "offset":      0,  
160.     "max":         20  
161.   },  
162.   
163.   /* 数据元素 */  
164.   "elements":[  
165.     {  
166.       "type":      "bar",   /* 关于柱图类型参考“bar-all-onlick.json” （从官网下载ofc2完整包的话可以找到这个文件）*/  
167.       "alpha":     0.5,  
168.       "colour":    "#9933CC",  
169.       "text":      "Page views",  
170.       "font-size": 10,  
171.       "on-show":    {       /* 展现样式 */  
172.           "type": "pop",        /* 弹出方式, 此外还有 drop 和 grow-up */  
173.           "cascade":1,          /* 不通柱子之间的间隔时间为 1 */  
174.           "delay":0.5           /* 延迟时间 */  
175.       },  
176.       "values" :   [9,6,7,9,5,{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#<br>hello/n#val#","on-click":"#"},6,null,7]  
177.     },  
178.     {  
179.       "type":      "line",          /* 展示类型 —— 折线图 */  
180.       "colour":    "#9933CC",       /* 线条颜色 */  
181.       "width":     2,               /* 线条粗细 */  
182.       "text":      "Page views",    /* 数据标题（Y轴上方） */  
183.       "font-size": 10,              /* 数据标题字体大小 */  
184.       "dot-size":  6,  
185.       "values" :   [15,18,19,14,17,18,15,18,17]  
186.     }],  
187.   
188.   /* 鼠标提示信息 */  
189.   "tooltip":{  
190.     "shadow":true,      /* 提示框影子 */  
191.     "mouse":2,          /* 1 - 滑动样式，2 - 非滑动样式，折线图不支持*/  
192.     "stroke":5,         /* 边框粗细 */  
193.     "rounded": 12,      /* 边角圆滑程度 */  
194.     "colour":"#00d000", /* 边框颜色 */  
195.     "background":"#d0d0ff",     /* 背景颜色 */  
196.     "title":"{font-size: 14px; color: #905050;}",       /* 标题样式 */  
197.     "body":"{font-size: 10px; font-weight: bold; color: #9090ff;}"      /* 本体样式 */  
198.   }  
199. }</pre>  
200. <p><br>  
201.  </p>  
202. <p> </p>  
203. <p> </p>  
204. <p>下面的例子中使用了一些常用的参数。</p>  
205. <p> <img alt="" src="http://hi.csdn.net/attachment/201110/13/0_13185197031B09.gif"></p>  
206. <p> </p>  
207. <p> <img src="http://hi.csdn.net/attachment/201110/13/0_1318519903AYR1.gif" alt=""></p>  
208. <p> </p>  
209. <p><img src="http://hi.csdn.net/attachment/201110/13/0_1318519955Y8v4.gif" alt=""></p>  
210. <pre></pre>  
211. <pre class="html" name="code"> </pre><pre class="html" name="code"> </pre><pre class="html" name="code"><img src="http://hi.csdn.net/attachment/201110/13/0_13185200242x0x.gif" alt=""></pre>  
212.   
213. </pre></pre></pre>  

open-flash-chart2的各种效果

原文：http://blog.csdn.net/zhejingyuan/article/details/40372053