open-flash-chart2的各种效果

<pre class="html" name="code"><pre class="html" name="code"><pre class="html" name="code"><pre class="html" name="code">{

"y_legend":{

"text": "Time of day",

"style": "{color: #736AFF;}"

},

"elements":[

{

"type":"line",

"colour":"#736AFF",

"text":"Avg. wave height (cm)",

"font-size":10,

"width":2,

"on-show":{

"type":"shrink-in", /* 从大变小 */

/* "type":"fade-in", 逐渐现形 */

/* "type":"drop", 从上掉落 */

/* "type":"mid-slide", 以中心线弯曲形成 */

/* "type":"explode", 从中心弹出 */

/* "type":"pop-up", 向上弹出 */

"cascade":1,

"delay":0.5

},

"line-style":{ /* 线的样式 */

"style":"dash", /* 虚线类型，默认为 solid */

"on":10, /* 实线部分长度 */

"off":5 /* 空白部分长度 */

},

"dot-style":{

"type":"anchor", /* 多边形类型 */

"sides":3, /* 边的个数 */

"alpha":1, /* 透明度 */

"hollow":true, /* 是否空心 */

"background-colour":"#a44a80", /* 背景色 */

"background-alpha": 0.4, /* 背景透明度 */

"width":2, /* 边的粗细 */

"tip":"type = anchor/nsides = 3/nhollow" /* 鼠标提示信息 */

},

"values" : [

1.5,1.69,1.88,2.06,2.21,2.34,2.43,

2.48,2.49,2.47,2.40,2.30,2.17,2.01,

1.83,1.64,1.44,1.24,1.05,

{"value" :0.88, "type":"bow", "dot-size":10},

{"value" :0.74, "type":"bow", "colour":"#00FF00", "dot-size":12, "hollow":false},

0.62,0.54,0.50,0.50,0.54,0.61,0.72,

0.86,1.03,1.22,1.41,1.61,1.81,1.99,

2.15,2.29,2.39,2.46,2.49,

{

"value" :2.48,

"type":"star", /* 五角星 */

"colour":"#FF0000", /* 边颜色 */

"dot-size":10, /* 大小 */

"rotation":30, /* 旋转角度 */

"hollow":true, /* 是否空心 */

"halo-size":12 /* 光晕大小 */

},

2.44,

{"value" :2.35, "type":"dot", "colour":"#FF0000"}, /* 普通点，只在鼠标滑过时显示 */

{"value" :2.23, "type":"solid-dot", "colour":"#00FF00"}, /* 实心点 */

{"value" :2.08, "type":"hollow-dot", "colour":"#FF00FF"}] /* 空心点 */

}

],

"x_axis":{

"labels":{

"rotate": 90,

"labels":["2:00am","2:10","2:20","2:30","2:40","2:50",

"3:00am","3:10","3:20","3:30","3:40","3:50",

"4:00am","4:10","4:20","4:30","4:40","4:50",

"5:00am","5:10","5:20","5:30","5:40","5:50",

"6:00am","6:10","6:20","6:30","6:40","6:50",

"7:00am","7:10","7:20","7:30","7:40","7:50",

"8:00am","8:10","8:20","8:30","8:40","8:50",

"9:00am","9:10","9:20"]

}

},

"y_axis":{

"max": 3

}

}</pre><br>

{ "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",

"0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，可以直接指定true启用默认动画效果 */

{ "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",

/* 标签颜色 */ "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"} ] } ]}

<pre></pre>

<br>

{ "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",

"0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，可以直接指定true启用默认动画效果 */

{ "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",

/* 标签颜色 */ "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"} ] } ]}

<pre></pre>

<br>

{ "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":

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,

"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" 逐渐现形

*/ "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"

向上生长 */ "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",

"June","July","August","Spetember"]} }, "y_axis":{ "stroke": 5, "tick-length": 10, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 2000 }}

<pre></pre>

<br>

<pre></pre>

<pre class="html" name="code"> </pre><pre class="html" name="code">{

/* 图表标题 */

"title" : {

"text" : "Many data lines", /* 标题文本 */

"style" : "{font-size: 30px;}" /* CSS样式 */

},

"is_decimal_separator_comma": 0, /* (0/1)，是否用逗号替换小数点 */

"is_fixed_num_decimals_forced": 1, /* (0/1)，是否强制小数点后面的位数 */

"num_decimals":3, /* 精度，即小数点后面的位数，需要配合上面参数一起使用 */

"is_thousand_separator_disabled": 0, /* (0/1)，是否使用千位分隔符 */

/* X轴标题（X轴下方） */

"x_legend" : {

"text" : "x_legend", /* 标题文本 */

"style" : "{font-size: 12px; color:#736AFF;}" /* CSS样式 */

},

/* Y轴标题（Y轴左方） */

"y_legend" : {

"text" : "y_legend", /* 标题文本 */

"style" : "{font-size: 12px; color:#2F55FF;}" /* CSS样式 */

},

/* X轴 */

"x_axis" : {

"stroke" : 2, /* X轴的粗细 */

"tick-height" : 15, /* X轴刻度的长度 */

"colour" : "#df0fd0", /* 颜色 */

"grid-colour": "#00ff00", /* 网格线的颜色 */

"offset" : 1, /* (0/1), 是否根据数据图形和标签的宽度进行延展 */

"3d" : 0, /* 显示3D */

"steps" : 0.5, /* 刻度间隔 */

"min":0,

"max":8,

"labels": {

"rotate": "vertical", /* 垂直方向显示标签 */

"size":13, /* 字体大小 */

"steps": 2, /* 整数，标签间隔 */

"visible-steps": 3, /* 可见标签间隔，会覆盖上面参数 */

"align":"center", /* 旋转的标签居中对齐，默认是较高的一端对其到刻度上 */

"labels": [

"January",

{"text":"February", "visible":true, "colour":"ff0000", "rotate":-60},

"March",

{"text":"April","colour":"#00D000"},

"May","June","July","August","September"]

}

},

/* Y轴 */

"y_axis":{

"stroke": 4,

"tick-length": 3,

"colour": "#d000d0",

"grid-colour": "#00ff00",

"offset": 0,

"max": 20

},

/* 数据元素 */

"elements":[

{

"type": "bar", /* 关于柱图类型参考“bar-all-onlick.json” （从官网下载ofc2完整包的话可以找到这个文件）*/

"alpha": 0.5,

"colour": "#9933CC",

"text": "Page views",

"font-size": 10,

"on-show": { /* 展现样式 */

"type": "pop", /* 弹出方式, 此外还有 drop 和 grow-up */

"cascade":1, /* 不通柱子之间的间隔时间为 1 */

"delay":0.5 /* 延迟时间 */

},

"values" : [9,6,7,9,5,{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#<br>hello/n#val#","on-click":"#"},6,null,7]

},

{

"type": "line", /* 展示类型 —— 折线图 */

"colour": "#9933CC", /* 线条颜色 */

"width": 2, /* 线条粗细 */

"text": "Page views", /* 数据标题（Y轴上方） */

"font-size": 10, /* 数据标题字体大小 */

"dot-size": 6,

"values" : [15,18,19,14,17,18,15,18,17]

}],

/* 鼠标提示信息 */

"tooltip":{

"shadow":true, /* 提示框影子 */

"mouse":2, /* 1 - 滑动样式，2 - 非滑动样式，折线图不支持*/

"stroke":5, /* 边框粗细 */

"rounded": 12, /* 边角圆滑程度 */

"colour":"#00d000", /* 边框颜色 */

"background":"#d0d0ff", /* 背景颜色 */

"title":"{font-size: 14px; color: #905050;}", /* 标题样式 */

"body":"{font-size: 10px; font-weight: bold; color: #9090ff;}" /* 本体样式 */

}

}</pre>

<p><br>

</p>

<p> </p>

<p> </p>

<p>下面的例子中使用了一些常用的参数。</p>

<p> <img alt="" src="http://hi.csdn.net/attachment/201110/13/0_13185197031B09.gif"></p>

<p> </p>

<p> <img src="http://hi.csdn.net/attachment/201110/13/0_1318519903AYR1.gif" alt=""></p>

<p> </p>

<p><img src="http://hi.csdn.net/attachment/201110/13/0_1318519955Y8v4.gif" alt=""></p>

<pre></pre>

<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>

</pre></pre></pre>