open-flash-chart2各种效果

2022-11-20 16:14:31

  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. "elements":[
  7. {
  8. "type":"line",
  9. "colour":"#736AFF",
  10. "text":"Avg. wave height (cm)",
  11. "font-size":10,
  12. "width":2,
  13. "on-show":{
  14. "type":"shrink-in",   /* 从大变小 */
  15. /* "type":"fade-in",     逐渐现形 */
  16. /* "type":"drop",        从上掉落 */
  17. /* "type":"mid-slide",   以中心线弯曲形成 */
  18. /* "type":"explode",     从中心弹出 */
  19. /* "type":"pop-up",      向上弹出 */
  20. "cascade":1,
  21. "delay":0.5
  22. },
  23. "line-style":{        /* 线的样式 */
  24. "style":"dash",       /* 虚线类型，默觉得 solid */
  25. "on":10,      /* 实线部分长度 */
  26. "off":5       /* 空白部分长度 */
  27. },
  28. "dot-style":{
  29. "type":"anchor",  /* 多边形类型 */
  30. "sides":3,        /* 边的个数 */
  31. "alpha":1,        /* 透明度 */
  32. "hollow":true,    /* 是否空心 */
  33. "background-colour":"#a44a80",    /* 背景色 */
  34. "background-alpha": 0.4,          /* 背景透明度 */
  35. "width":2,                        /* 边的粗细 */
  36. "tip":"type = anchor/nsides = 3/nhollow"      /* 鼠标提示信息 */
  37. },
  38. "values" :   [
  39. 1.5,1.69,1.88,2.06,2.21,2.34,2.43,
  40. 2.48,2.49,2.47,2.40,2.30,2.17,2.01,
  41. 1.83,1.64,1.44,1.24,1.05,
  42. {"value" :0.88, "type":"bow", "dot-size":10},
  43. {"value" :0.74, "type":"bow", "colour":"#00FF00", "dot-size":12, "hollow":false},
  44. 0.62,0.54,0.50,0.50,0.54,0.61,0.72,
  45. 0.86,1.03,1.22,1.41,1.61,1.81,1.99,
  46. 2.15,2.29,2.39,2.46,2.49,
  47. {
  48. "value" :2.48,
  49. "type":"star",      /* 五角星 */
  50. "colour":"#FF0000", /* 边颜色 */
  51. "dot-size":10,      /* 大小 */
  52. "rotation":30,      /* 旋转角度 */
  53. "hollow":true,      /* 是否空心 */
  54. "halo-size":12      /* 光晕大小 */
  55. },
  56. 2.44,
  57. {"value" :2.35, "type":"dot", "colour":"#FF0000"},      /* 普通点，仅仅在鼠标滑过时显示 */
  58. {"value" :2.23, "type":"solid-dot", "colour":"#00FF00"},    /* 实心点 */
  59. {"value" :2.08, "type":"hollow-dot", "colour":"#FF00FF"}]   /* 空心点 */
  60. }
  61. ],
  62. "x_axis":{
  63. "labels":{
  64. "rotate": 90,
  65. "labels":["2:00am","2:10","2:20","2:30","2:40","2:50",
  66. "3:00am","3:10","3:20","3:30","3:40","3:50",
  67. "4:00am","4:10","4:20","4:30","4:40","4:50",
  68. "5:00am","5:10","5:20","5:30","5:40","5:50",
  69. "6:00am","6:10","6:20","6:30","6:40","6:50",
  70. "7:00am","7:10","7:20","7:30","7:40","7:50",
  71. "8:00am","8:10","8:20","8:30","8:40","8:50",
  72. "9:00am","9:10","9:20"]
  73. }
  74. },
  75. "y_axis":{
  76. "max":   3
  77. }
  78. }</pre><br>
  79. { "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",
  80. "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，能够直接指定true启用默认动画效果 */
  81. { "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",
  82. /* 标签颜色 */ "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"} ] } ]}
  83. <pre></pre>
  84. <br>
  85. { "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",

  86. "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果，能够直接指定true启用默认动画效果 */
  87. { "type":"bounce", /* 鼠标滑过时，使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时，使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff",
  88. /* 标签颜色 */ "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"} ] } ]}
  89. <pre></pre>
  90. <br>
  91. { "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":
  92. 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,
  93. "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" 逐渐现形
  94. */ "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"
  95. 向上生长 */ "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",
  96. "June","July","August","Spetember"]} }, "y_axis":{ "stroke": 5, "tick-length": 10, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 2000 }}
  97. <pre></pre>
  98. <br>
  99. <pre></pre>
  100. <pre class="html" name="code"> </pre><pre class="html" name="code">{
  101. /* 图表标题 */
  102. "title" : {
  103. "text" : "Many data lines",         /* 标题文本 */
  104. "style" : "{font-size: 30px;}"  /* CSS样式 */
  105. },
  106. "is_decimal_separator_comma": 0,     /* (0/1)，是否用逗号替换小数点 */
  107. "is_fixed_num_decimals_forced": 1,   /* (0/1)，是否强制小数点后面的位数 */
  108. "num_decimals":3,        /* 精度，即小数点后面的位数，须要配合上面參数一起使用 */
  109. "is_thousand_separator_disabled": 0,     /* (0/1)，是否使用千位分隔符 */
  110. /* X轴标题（X轴下方） */
  111. "x_legend" : {
  112. "text" : "x_legend",                /* 标题文本 */
  113. "style" : "{font-size: 12px; color:#736AFF;}"       /* CSS样式 */
  114. },
  115. /* Y轴标题（Y轴左方） */
  116. "y_legend" : {
  117. "text" : "y_legend",                /* 标题文本 */
  118. "style" : "{font-size: 12px; color:#2F55FF;}"       /* CSS样式 */
  119. },
  120. /* X轴 */
  121. "x_axis" : {
  122. "stroke" : 2,                   /* X轴的粗细 */
  123. "tick-height" : 15,             /* X轴刻度的长度 */
  124. "colour" : "#df0fd0",           /* 颜色 */
  125. "grid-colour": "#00ff00",       /* 网格线的颜色 */
  126. "offset" : 1,                   /* (0/1), 是否依据数据图形和标签的宽度进行延展 */
  127. "3d" : 0,                       /* 显示3D */
  128. "steps" : 0.5,                  /* 刻度间隔 */
  129. "min":0,
  130. "max":8,
  131. "labels": {
  132. "rotate": "vertical",           /* 垂直方向显示标签 */
  133. "size":13,                      /* 字体大小 */
  134. "steps": 2,                     /* 整数，标签间隔 */
  135. "visible-steps": 3,             /* 可见标签间隔，会覆盖上面參数 */
  136. "align":"center",               /* 旋转的标签居中对齐，默认是较高的一端对其到刻度上 */
  137. "labels": [
  138. "January",
  139. {"text":"February", "visible":true, "colour":"ff0000", "rotate":-60},
  140. "March",
  141. {"text":"April","colour":"#00D000"},
  142. "May","June","July","August","September"]
  143. }
  144. },
  145. /* Y轴 */
  146. "y_axis":{
  147. "stroke":      4,
  148. "tick-length": 3,
  149. "colour":      "#d000d0",
  150. "grid-colour": "#00ff00",
  151. "offset":      0,
  152. "max":         20
  153. },
  154. /* 数据元素 */
  155. "elements":[
  156. {
  157. "type":      "bar",   /* 关于柱图类型參考“bar-all-onlick.json” （从官网下载ofc2完整包的话能够找到这个文件）*/
  158. "alpha":     0.5,
  159. "colour":    "#9933CC",
  160. "text":      "Page views",
  161. "font-size": 10,
  162. "on-show":    {       /* 展现样式 */
  163. "type": "pop",        /* 弹出方式, 此外还有 drop 和 grow-up */
  164. "cascade":1,          /* 不通柱子之间的间隔时间为 1 */
  165. "delay":0.5           /* 延迟时间 */
  166. },
  167. "values" :   [9,6,7,9,5,{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#<br>hello/n#val#","on-click":"#"},6,null,7]
  168. },
  169. {
  170. "type":      "line",          /* 展示类型 —— 折线图 */
  171. "colour":    "#9933CC",       /* 线条颜色 */
  172. "width":     2,               /* 线条粗细 */
  173. "text":      "Page views",    /* 数据标题（Y轴上方） */
  174. "font-size": 10,              /* 数据标题字体大小 */
  175. "dot-size":  6,
  176. "values" :   [15,18,19,14,17,18,15,18,17]
  177. }],
  178. /* 鼠标提示信息 */
  179. "tooltip":{
  180. "shadow":true,      /* 提示框影子 */
  181. "mouse":2,          /* 1 - 滑动样式。2 - 非滑动样式，折线图不支持*/
  182. "stroke":5,         /* 边框粗细 */
  183. "rounded": 12,      /* 边角圆滑程度 */
  184. "colour":"#00d000", /* 边框颜色 */
  185. "background":"#d0d0ff",     /* 背景颜色 */
  186. "title":"{font-size: 14px; color: #905050;}",       /* 标题样式 */
  187. "body":"{font-size: 10px; font-weight: bold; color: #9090ff;}"      /* 本体样式 */
  188. }
  189. }</pre>
  190. <p><br>
  191. </p>
  192. <p> </p>
  193. <p> </p>
  194. <p>以下的样例中使用了一些经常使用的參数。</p>
  195. <p> <img alt="" src="http://hi.csdn.net/attachment/201110/13/0_13185197031B09.gif"></p>
  196. <p> </p>
  197. <p> <img src="http://hi.csdn.net/attachment/201110/13/0_1318519903AYR1.gif" alt=""></p>
  198. <p> </p>
  199. <p><img src="http://hi.csdn.net/attachment/201110/13/0_1318519955Y8v4.gif" alt=""></p>
  200. <pre></pre>
  201. <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>
  202. </pre></pre></pre>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

上一篇：影响国内WinCE7发展的最大障碍是没有D版下载


下一篇：linux网络编程之用socket实现简单客户端和服务端的通信（基于UDP）