首页 > 代码库 > open-flash-chart2的各种效果

open-flash-chart2的各种效果

2024-07-28 14:16:22   217人阅读

  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的各种效果


联系
我们