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];
}
}
分享到：
相关推荐
本实例是关于如何使用OpenFlashChart2与JavaScript协同工作，以实现客户端与服务器端的交互。 在.NET环境中，我们首先需要下载OpenFlashChart2的库文件，这些文件通常包括AS3编写的Flash组件和与之交互的服务器端...
在"OpenFlashChart组件的使用.doc"文档中，应该详细介绍了如何在项目中集成和使用OpenFlashChart。通常，使用步骤包括： 1. **引入库**：首先需要在HTML页面中引入OpenFlashChart的SWF文件和JavaScript文件。 2. *...
OpenFlashChart的使用主要涉及以下几个核心知识点： 1. **Flash图表组件**：OpenFlashChart基于Adobe Flash技术，通过SWF文件提供图表渲染。Flash的广泛兼容性和优秀的图形渲染能力使得图表在各种浏览器和操作系统...
在"OpenFlashChart实例 + 详细讲解"中，我们将深入探讨如何使用这个库来创建引人入胜的数据可视化效果。 首先，OpenFlashChart的基本使用涉及到在HTML中引入库文件，这通常是一个SWF文件和JavaScript文件。SWF文件...
2. **基础图表类型**：OpenFlashChart支持多种图表类型，包括折线图、柱状图、饼图、散点图、面积图等。每种图表都有其特定的用途，例如折线图用于显示数据趋势，饼图用于展示比例关系。 3. **数据格式**：...
2. **构建图表对象**：使用Java代码创建图表对象，例如创建一个折线图，可以实例化`LineChart`类，并设置其属性，如颜色、线条样式、数据点等。 3. **设置数据**：通过`add_element()`方法或类似的接口，将数据添加...
2. **使用Java集成** 在Java环境中，OpenFlashChart可以通过Java API与后端服务进行交互，将服务器端的数据转换为图表。开发者可以创建Java对象来表示图表的各个元素，如数据系列、颜色、标签等，然后通过HTTP响应...
OpenFlashChart是一款强大的开源Flash图表库，用于在Web应用程序中创建高质量、交互式的图表。它以其易用性和灵活性而受到开发者的青睐，特别是在需要展示数据可视化时。在提供的压缩包"OpenFlashChart Library"中，...
8. **性能优化**：了解如何优化数据传输和渲染过程，尤其是在处理大量数据时，是使用OpenFlashChart的关键。实例可能会包含一些性能优化的策略和实践。 9. **错误处理**：在实际开发中，理解如何处理数据异常或加载...
2. **数据格式**：OpenFlashChart接收两种主要的数据格式，XML和JSON。C#中可以使用内置的类如XmlSerializer或JavaScriptSerializer来生成这两种格式的数据。 3. **生成图表数据**：根据实际需求，你需要在C#代码中...
OpenFlashChart是一款强大的开源图表库，它使用Flash技术来生成高质量、交互式的图表。这个C#示例是针对ASP.NET开发者的，展示了如何在.NET环境中集成OpenFlashChart库，以创建动态、美观的数据可视化效果。 在ASP...
1.动画可交互的图表 2.简单但强大的Javascript集成 3.无需安装 4.简单易用 5.与服务器端语言独立（或说无关） 6.减少服务器端负荷 7.多种图表类型支持 8.完全免费
本文将深入探讨OpenFlashChart的主要特性和使用方法。 一、主要特性 1. **丰富的图表类型**：OpenFlashChart支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图等，满足各种数据分析和展示需求。 2. **...
这个"openflashchart for flex demo"提供了使用Flex框架与OpenFlashChart结合的实例，包括源代码，非常适合开发者进行学习和实践。 **Flex 框架** Flex 是Adobe公司开发的一个开源框架，专门用于构建富互联网应用...
2. **OpenFlashChart英文文档** 英文文档通常更为全面，可能包含更多细节和更新的内容。对于一些高级特性和最新功能，英文文档通常是获取信息的最佳来源。开发者可以通过对照中文文档和英文文档，深入理解...
**Open Flash Chart 2 使用详解** Open Flash Chart 2 是一款强大的开源图表库，它使用 Adobe Flash 技术来创建各种美观且交互性强的数据可视化图表。这个库特别适合那些需要在网页上展示复杂数据的开发者，它提供...