OpenFlashChart2的使用

来源：互联网发布：手机微博淘客软件编辑：程序博客网时间：2024/06/05 19:06

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

一、JSON数据格式如下：

data.txt代码  
{  
  /* 图表标题 */  
  "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页面内容参考如下：

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格式的数据

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

Js代码  
//数据加载方法一：通过静态的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];     
  }     
}  

0 0