加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

open-flash-chart2的各种效果

发布时间：2020-12-15 17:34:09 所属栏目：百科 来源：网络整理
导读：pre ? class = "html" ? name = "code" {?? ??"y_legend":{?? ????"text":???"Time?of?day",?? ????"style":?"{color:?#736AFF;}"?? ??},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ?? ??"elements":[?? ????{??
  1. <pre?class="html"?name="code">>{??
  2. ??"y_legend":{??
  3. ????"text":???"Time?of?day",??
  4. ????"style":?"{color:?#736AFF;}"??
  5. ??},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??
  6. ??"elements":[??
  7. ????{??
  8. ??????"type":"line",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"colour":"#736AFF",??
  9. ??????"text":"Avg.?wave?height?(cm)",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"font-size":10,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"width":2,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"on-show":{??
  10. ??????????"type":"shrink-in",???/*?从大变小?*/??
  11. ???????/*?"type":"fade-in",?????逐渐现形?*/??
  12. ???????/*?"type":"drop",????????从上掉落?*/??
  13. ???????/*?"type":"mid-slide",???以中心线弯曲形成?*/??
  14. ???????/*?"type":"explode",?????从中心弹出?*/??
  15. ???????/*?"type":"pop-up",??????向上弹出?*/??
  16. ??????????"cascade":1,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????"delay":0.5??
  17. ??????},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"line-style":{????????/*?线的样式?*/??
  18. ??????????"style":"dash",???????/*?虚线类型，默认为?solid?*/??
  19. ??????????"on":10,??????/*?实线部分长度?*/??
  20. ??????????"off":5???????/*?空白部分长度?*/??
  21. ??????},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"dot-style":{??
  22. ??????????"type":"anchor",??/*?多边形类型?*/??
  23. ??????????"sides":3,????????/*?边的个数?*/??
  24. ??????????"alpha":1,????????/*?透明度?*/??
  25. ??????????"hollow":true,????/*?是否空心?*/??
  26. ??????????"background-colour":"#a44a80",????/*?背景色?*/??
  27. ??????????"background-alpha":?0.4,??????????/*?背景透明度?*/??
  28. ??????????"width":2,????????????????????????/*?边的粗细?*/??
  29. ??????????"tip":"type?=?anchor/nsides?=?3/nhollow"??????/*?鼠标提示信息?*/??
  30. ??????"values"?:???[??
  31. ????????????1.5,1.69,1.88,2.06,2.21,2.34,2.43,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????2.48,2.49,2.47,2.40,2.30,2.17,2.01,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????1.83,1.64,1.44,1.24,1.05,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{"value"?:0.88,?"type":"bow",?"dot-size":10},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{"value"?:0.74,?"colour":"#00FF00",?"dot-size":12,?"hollow":false},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????0.62,0.54,0.50,0.61,0.72,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????0.86,1.03,1.22,1.41,1.61,1.81,1.99,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????2.15,2.29,2.39,2.46,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{??
  32. ????????????????"value"?:2.48,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????????"type":"star",??????/*?五角星?*/??
  33. ????????????????"colour":"#FF0000",?/*?边颜色?*/??
  34. ????????????????"dot-size":10,??????/*?大小?*/??
  35. ????????????????"rotation":30,??????/*?旋转角度?*/??
  36. ????????????????"hollow":true,??????/*?是否空心?*/??
  37. ????????????????"halo-size":12??????/*?光晕大小?*/??
  38. ????????????},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????2.44,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{"value"?:2.35,?"type":"dot",?"colour":"#FF0000"},??????/*?普通点，只在鼠标滑过时显示?*/??
  39. ????????????{"value"?:2.23,?"type":"solid-dot",?"colour":"#00FF00"},????/*?实心点?*/??
  40. ????????????{"value"?:2.08,?"type":"hollow-dot",?"colour":"#FF00FF"}]???/*?空心点?*/??
  41. ????}??
  42. ??],108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??
  43. ??"x_axis":{??
  44. ????"labels":{??
  45. ????????"rotate":?90,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????"labels":["2:00am","2:10","2:20","2:30","2:40","2:50",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"3:00am","3:10","3:20","3:30","3:40","3:50",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"4:00am","4:10","4:20","4:30","4:40","4:50",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"5:00am","5:10","5:20","5:30","5:40","5:50",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"6:00am","6:10","6:20","6:30","6:40","6:50",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"7:00am","7:10","7:20","7:30","7:40","7:50",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"8:00am","8:10","8:20","8:30","8:40","8:50",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????????????"9:00am","9:10","9:20"]??
  46. ??},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??"y_axis":{??
  47. ????"max":???3??
  48. ??}??
  49. }</prebr>??
  50. {?"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",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ?"0x9999CC",?"0xAAAAAA",?"0x669999","0xBBBB55",?"0xCC6600",?"0x9999FF",?"0x0066CC","0x99CCCC",?"0x999999",?"0xFFCC00",?"0x009999","0x99CC33",?"0xFF9900",?"0x999966",?"0x66CCCC","0x339966",?"0xCCCC33"],?"alpha":0.8,?"animate":[?/*?动画效果，可以直接指定true启用默认动画效果?*/??
  51. ?{?"type":"bounce",?/*?鼠标滑过时，使用弹跳效果?*/?"distance":20?/*?弹跳距离?*/?},?{?"type":"fade"?/*?鼠标滑过时，使用颜色变深效果?*/?}?],?"radius":?150,?/*?半径长度?*/?"tip":"#val#>#total#>#percent#>#label#",?/*?鼠标提示信息?*/?"gradient-fill":true,?/*?颜色渐变效果?*/?"label-colour":"#0000ff",??
  52. ?/*?标签颜色?*/?"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"},"on-click":"my_function"}?]?}?]}??
  53. >??
  54. {?"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":??
  55. ?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,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ?"bottom":200,?"colour":"#A03030",?"tip":"#top#>hello",?"on-click":"#"?},?600,null,1700]?},?{?"type":?"bar_glass",?"alpha":?0.7,?"colour":?"#CC9933",?"text":?"Page?views?2",?"on-show":?{?"type":"drop",?/*?掉落方式?*/?/*?"type":"fade-in"?逐渐现形??
  56. ?*/?"cascade":0.9?/*?不通柱子之间的间隔时间为?0.9?*/?},?"values"?:?[400,900,700,1600,900]?},?{?"type":?"bar_3d",?"alpha":?0.9,?"colour":?"#CC99ff",?"on-show":?{?"type":"grow-down",?/*?向下生长?*/?/*?"type":"grow-up"??
  57. ?向上生长?*/?"cascade":0.9?/*?不通柱子之间的间隔时间为?0.9?*/?},?"values"?:?[1800,200,40,1500]?}?],?"x_axis":{?"stroke":2,?"tick-height":20,?"3d":5,?"colour":"#df90d0",?"grid_colour":"#00ff00",?"labels"?:?{"labels":?["January","February","March","April","May",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ?"June","July","August","Spetember"]}?},?"y_axis":{?"stroke":?5,?"tick-length":?10,?"colour":?"#d000d0",?"grid_colour":?"#00ff00",?"offset":?0,?"max":?2000?}}??
  58. >? ??/*?图表标题?*/??
  59. ??"title"?:?{??
  60. ????"text"?:?"Many?data?lines",?????????/*?标题文本?*/??
  61. ????"style"?:?"{font-size:?30px;}"??/*?CSS样式?*/??
  62. ???"is_decimal_separator_comma":?0,?????/*?(0/1)，是否用逗号替换小数点?*/??
  63. ???"is_fixed_num_decimals_forced":?1,???/*?(0/1)，是否强制小数点后面的位数?*/??
  64. ???"num_decimals":3,????????/*?精度，即小数点后面的位数，需要配合上面参数一起使用?*/??
  65. ???"is_thousand_separator_disabled":?0,?????/*?(0/1)，是否使用千位分隔符?*/??
  66. ??/*?X轴标题（X轴下方）?*/??
  67. ??"x_legend"?:?{??
  68. ????"text"?:?"x_legend",????????????????/*?标题文本?*/??
  69. ????"style"?:?"{font-size:?12px;?color:#736AFF;}"???????/*?CSS样式?*/??
  70. ??/*?Y轴标题（Y轴左方）?*/??
  71. ??"y_legend"?:?{??
  72. ????"text"?:?"y_legend",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"style"?:?"{font-size:?12px;?color:#2F55FF;}"???????/*?CSS样式?*/??
  73. ??/*?X轴?*/??
  74. ??"x_axis"?:?{??
  75. ????"stroke"?:?2,???????????????????/*?X轴的粗细?*/??
  76. ????"tick-height"?:?15,?????????????/*?X轴刻度的长度?*/??
  77. ????"colour"?:?"#df0fd0",???????????/*?颜色?*/??
  78. ????"grid-colour":?"#00ff00",???????/*?网格线的颜色?*/??
  79. ????"offset"?:?1,???????????????????/*?(0/1),?是否根据数据图形和标签的宽度进行延展?*/??
  80. ????"3d"?:?0,???????????????????????/*?显示3D?*/??
  81. ????"steps"?:?0.5,??????????????????/*?刻度间隔?*/??
  82. ????"min":0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"max":8,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"labels":?{??
  83. ????????"rotate":?"vertical",???????????/*?垂直方向显示标签?*/??
  84. ????????"size":13,??????????????????????/*?字体大小?*/??
  85. ????????"steps":?2,?????????????????????/*?整数，标签间隔?*/??
  86. ????????"visible-steps":?3,?????????????/*?可见标签间隔，会覆盖上面参数?*/??
  87. ????????"align":"center",???????????????/*?旋转的标签居中对齐，默认是较高的一端对其到刻度上?*/??
  88. ????????"labels":?[??
  89. ????????????"January",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{"text":"February",?"visible":true,?"colour":"ff0000",?"rotate":-60},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????"March",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????{"text":"April","colour":"#00D000"},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????????"May","June","September"]??
  90. ????}??
  91. ??/*?Y轴?*/??
  92. ????"stroke":??????4,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"tick-length":?3,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"colour":??????"#d000d0",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"offset":??????0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????"max":?????????20??
  93. ??/*?数据元素?*/??
  94. ??"elements":[??
  95. ????{??
  96. ??????"type":??????"bar",???/*?关于柱图类型参考“bar-all-onlick.json”?（从官网下载ofc2完整包的话可以找到这个文件）*/??
  97. ??????"alpha":?????0.5,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"colour":????"#9933CC",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"text":??????"Page?views",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"font-size":?10,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"on-show":????{???????/*?展现样式?*/??
  98. ??????????"type":?"pop",????????/*?弹出方式,?此外还有?drop?和?grow-up?*/??
  99. ??????????"delay":0.5???????????/*?延迟时间?*/??
  100. ??????"values"?:???[9,6,7,9,5,{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#>hello/n#val#","on-click":"#"},7]??
  101. ????},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"type":??????"line",??????????/*?展示类型?——?折线图?*/??
  102. ??????"width":?????2,???????????????/*?线条粗细?*/??
  103. ??????"text":??????"Page?views",????/*?数据标题（Y轴上方）?*/??
  104. ??????"font-size":?10,??????????????/*?数据标题字体大小?*/??
  105. ??????"dot-size":??6,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??????"values"?:???[15,18,19,14,17,15,17]??
  106. ????}],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ??/*?鼠标提示信息?*/??
  107. ??"tooltip":{??
  108. ????"shadow":true,??????/*?提示框影子?*/??
  109. ????"mouse":2,??????????/*?1?-?滑动样式，2?-?非滑动样式，折线图不支持*/??
  110. ????"stroke":5,?????????/*?边框粗细?*/??
  111. ????"rounded":?12,??????/*?边角圆滑程度?*/??
  112. ????"colour":"#00d000",?/*?边框颜色?*/??
  113. ????"background":"#d0d0ff",?????/*?背景颜色?*/??
  114. ????"title":"{font-size:?14px;?color:?#905050;}",???????/*?标题样式?*/??
  115. ????"body":"{font-size:?10px;?font-weight:?bold;?color:?#9090ff;}"??????/*?本体样式?*/??
  116. p ?>下面的例子中使用了一些常用的参数。img?alt=""?src="http://hi.csdn.net/attachment/201110/13/0_13185197031B09.gif"img?src="http://hi.csdn.net/attachment/201110/13/0_1318519903AYR1.gif"?alt=""img?src="http://hi.csdn.net/attachment/201110/13/0_1318519955Y8v4.gif"?alt=""img?src="http://hi.csdn.net/attachment/201110/13/0_13185200242x0x.gif"?alt="">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同