| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

开源Flash图表组件:Open Flash Chart 2

Open Flash Chart2是依据Open Flash Chart1.x完全重新构建的一个Flash图表绘制组件。与1.x版本最大不同之处在于把数据格式改成JSON,以实现一些更酷的功能。该版本全部采用Actionscript3开发,Adobe Flex编译。

一、JSON数据格式如下:

{    /* 图表标题 */    "title":{      "text": "标题",      "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"    },       /* X轴标题 */      "x_legend":{        "text": "X轴标题",       "style": "{font-size: 12px; color:#736AFF;}"    },           /* Y轴标题 */     "y_legend":{      "text": "Y轴标题",      "style": "{color: #736AFF; font-size: 12px;}"    },        "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_axis":{      "stroke":1,     /* X轴的粗细 */      "tick_height": 10,   /* X轴刻度的长度 */      "colour":"#d000d0",    /* 颜色 */      "grid_colour":"#00ff00", /* 网格线的颜色 */      "offset": 1,                /* (0/1), 是否根据数据图形和标签的宽度进行延展 */       "3d": 0,                       /* 显示3D */       "steps": 0.5,                  /* 刻度间隔 */      /*"min": 0,       "max": 8,*/      "labels": {          "labels": ["一月","二月","三月","四月","五月","六月","七月","八月",           {"text":"九月", "visible":true, "colour":"ff0000", "rotate":-60}          ]      }     },       "y_axis":{      "stroke":      4,      "tick_length": 3,      "colour":      "#d000d0",      "grid_colour": "#00ff00",      "offset":      0,      "max":         20,      "steps": 2    },       "elements":[      {        "type":      "bar",  /* 可选值有bar,line,pie等 */        "alpha":     0.5,        "colour":    "#9933CC",        "text":      "图例一",        "font-size": 10,        "values" :   [9,6,7,9,5,7,6,9,         {          "bottom":0,           "top":7,           "colour":"#A03030",           "tip":"#top#<br>hello<br>#val#",          "on-click":"#"         }        ]      },      {        "type":      "bar",        "alpha":     0.5,        "colour":    "#CC9933",        "text":      "图例二",        "font-size": 10,        "values" :   [6,7,9,5,7,6,9,7,3]      }     ],       "tooltip":{         "shadow": false,      /* 提示框影子 */          "stroke": 2,         /* 边框粗细 */         "rounded": 1,      /* 边角圆滑程度 */         "colour":"#00d000", /* 边框颜色 */         "background":"#d0d0ff",     /* 背景颜色 */         "title":"{font-size: 18px; color: #000000; font-weight:bold;}",       /* 标题样式 */         "body":"{font-size: 10px; color: #000000;}"      /* 本体样式 */   }   }


二、HTML页面内容参考如下:

<%@ page language="java" pageEncoding="utf-8"%>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>    <head>      <title>Open Flash Chart</title>   <script type="text/javascript" src="js/json/json2.js"></script>   <script type="text/javascript" src="js/swfobject.js"></script>    </head>        <body>      <div id="my_chart"></div>      <script type="text/javascript">    swfobject.embedSWF(     "open-flash-chart.swf",      "my_chart",      "650",      "300",      "9.0.0",      "expressInstall.swf",      {"data-file":"bar.txt"},     {"wmode":"transparent"}    );   </script>    </body>  </html>

bar.txt文件的内容就是json格式的数据


三、数据加载方式有以下几种:

//数据加载方法一:通过静态的json格式字符串数据  //ofc2默认会调用 open_flash_chart_data 该方法,方法返回json格式的字符串数据  function open_flash_chart_data(){   var data = { }; //json对象   return JSON.stringify(data);  }    //数据加载方法二:通过data-file属性调用action  //{"data-file":"dataServlet?r=<%=new Random().nextInt()%>"},    //数据加载方法三:通过data-file属性调用json格式的数据文件  //{"data-file":"bar.txt"},    //数据加载方法四:通过Ajax调用action  function open_flash_chart_data(){   jQuery.post("dataServlet", function(data){    var tmp = findSWF("my_chart");     tmp.load(JSON.stringify(data));     });      var emptyData = {    "title": {"text": ""},    "elements": []   };   return JSON.stringify(emptyData);  }    function findSWF(movieName) {       if (navigator.appName.indexOf("Microsoft")!= -1) {      return window[movieName];       } else {      return document[movieName];       }     }

项目主页:http://www.open-open.com/lib/view/home/1421993906359

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1421993906359.html
图表/报表制作 Open Flash Chart 2