`

flex用openflashchart制作图表报表

    博客分类:
  • flex
阅读更多
数据文件必须是JSON格式.JSON对象的基本格式:
{}
把所有对象都编写在{}里面.让它看起来像下面 JSON 数据格式:
{
“title”:{
“text”: “Many data lines”,
“style”: “{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}”
}
}
Title(可选)
所有属性参数都可选的.
text:string , 标题
style:string , CSS样式
例子:
{
“title”:{
“text”: “Yedeer.com.cn data line”,
“style”: “{font-size:20px; color:#000000; font-family:Verdana; text-align:center;}”
}
}
Y_Legend(可选)
所有属性参数都是可选.
text:string, Y轴标题
style:string, CSS样式
例子:
{
“y_legend”:{
“text”:”Yedeer.com.cn Chart”,
“style”:”{color:#736AEF; font-size:12px;}”
}
}
X Axis(可选)
这个对象的属性是可选的,如果没有指定属性将使用默认的X轴属性.
所有可选属性:
stroke: number, X轴线的宽度
tick-height: number, X轴刻度线高度值
colour: string, 线的颜色
offset: boolean, 柱状图表中X轴的偏移最小值是0
grid-color:string, 表格线颜色
3d: boolean, 设置3D
steps: 取决于tick-height属性
labels: array of strings, 每个X点的标签
例子:
{
“x_axis”:{
“stroke”: 1,
“tick-height”: 10,
“colour”: “#d000d0″,
“grid-colour”: “#00ff00″,
“labels”: ["January,"February","March","April","May","June","July","August","Spetember"]
}
}
Y Axis(可选)
应该属性和X Axis差不多(因为官方没给出,不知道是不是编漏了)
min:integer, Y轴最小值
max: integer, Y轴最大值
tick-length:number, Y轴刻度线长度
例子:
{
“y_axis”:{
“stroke”: 4,
“tick-length”: 3,
“colour”: “#d000d0″,
“grid-colour”:”#00ff00″,
“offset”: 0,
“max”: 20
}
}
Elements 元素
元素的属性是一个数组的通用对象
这些通用对象图表类型为(line,bar,scatter等等)
{
“elements”:[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,7]
},
{
“type”: “bar”,
“alpha”: 0.5,
“colour”: “#CC9933″,
“text”: “Page views 2″,
“font-size”: 10,
“values” : [9,6,7,9,5,7,6,9,7]
}
]
}
Elements.bar
柱状图表必须包含在元素数组
type: string 必须是’bar’
alpha: number, 0(透明)和1(不透明)之间的值
colour:string, CSS颜色
text:string, 图例说明文本
font-size: number, 设置图例文本字体大小
values: array of number, 柱子的高底
例子:
{
“elements”:[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,7]
}
]
}
Elements.pie
圆饼图表,必须包含在元素数据组里
type:string, 必须是’pie’
start-angle: number, 第一个切片角度
colours:array of string, CSS颜色
alpha:number, 0(透明)和1(不透明)之间的值
stroke: number, 切片外边线宽
animate: boolean, 切片图表动画
values:array of objects, 每个切片值或者切片对象与值
例子:
{
“elements”:[
{
"type": "pie",
"start-angle": 180,
"colours": ["#d01f3c","#356aa0","#C79810","#73880A","#D15600","#6BBA70"],
“alpha”: 0.6,
“stroke”: 2,
“animate”: 1,
“values” : [0,2,{"value":0,"text":"zero"},2,6]
}
]
}
Elements.hbar
横状图表
values:array of objects 每个值含有”right”和”left”可选值
例子:
{
“elements”:[
{
"type": "hbar",
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [{"right":10},{"right":15},{"left":13,"right":17}]
}
]
}
Elements.line_dot
线形图表
values:array of number 一个数组集合
例子:
{
“elements”:[
{
"type": "line_dot",
"colour": "#736AFF",
"text": "Avg. wave height (cm)",
"font-size": 10,
"width": 2,
"dot-size": 4,
"values" : [1.5,1.69,1.88,2.06,2.21,2.34,null,2.35,2.23,2.08]
}
]
}
Elements.line*
注意:这是一个简单定义3种不同线形类型的图表(不明白的属性,请向上温习一下)
例子:
{
“title”:{
“text”:”Many data lines”,
“style”:”{font-size: 30px;}”
},

“y_legend”:{
“text”:”Open Flash Chart”,
“style”:”{font-size: 12px; color:#736AFF;}”
},

“elements”:[
{
"type": "line",
"colour": "#9933CC",
"text": "Page views",
"width": 2,
"font-size": 10,
"dot-size": 6,
"values" : [15,18,19,14,17,18,15,18,17]
},
{
“type”: “line_dot”,
“colour”: “#CC3399″,
“width”: 2,
“text”: “Downloads”,
“font-size”: 10,
“dot-size”: 5,
“values” : [10,12,14,9,12,13,10,13,12]
},
{
“type”: “line_hollow”,
“colour”: “#80a033″,
“width”: 2,
“text”: “Bounces”,
“font-size”: 10,
“dot-size”: 6,
“values” : [5,7,9,7,4,6,1,2,5]
}
],

“y_axis”:{
“max”: 20
},

“x_axis”:{
“steps”: 2,
“labels”: ["January","February","March","April","May","June","July","August","September"]
}
}
例子:
这是一个简单的横状图表的JSON对象内容(不明白的属性请向上温习)
{
“title”:{
“text”:”HBar Map X values”,
“style”:”{font-size: 20px; font-family: Verdana; text-align: center;}”
},

“elements”:[
{
"type": "hbar",
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [{"right":10},{"right":15},{"left":13,"right":17}]
}
],
“x_axis”:{
“min”: 0,
“max”: 20,
“offset”: 0,
“labels”: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v"]
},
“y_axis”:{
“stroke”: 14,
“tick-length”: 30,
“colour”: “#d09090″,
“grid-colour”: “#00ff00″,
“offset”: 1,
“labels”: ["slashdot.org","digg.com","reddit.com"]
}
}
分享到:
评论
1 楼 smithfox 2011-02-01  
这个ofc2_library.swc其实是来自于 http://blog.webasp.com.au/post/625615072/open-flash-chart-2-kvasir-as-a-flex-swc-component (需要fq), 我基于这个版本做了一个改进版(比如解决pie的tooltip偏移问题), 见我的blog: http://www.smithfox.com/?e=71

相关推荐

    openflashchart for flex demo

    这个"openflashchart for flex demo"提供了使用Flex框架与OpenFlashChart结合的实例,包括源代码,非常适合开发者进行学习和实践。 **Flex 框架** Flex 是Adobe公司开发的一个开源框架,专门用于构建富互联网应用...

    openflashchart ofc 动态报表实例

    在OpenFlashChart中,动态报表可以通过Ajax技术实现,这样可以仅刷新图表,而不是整个页面,提高用户体验。 要开始创建一个OpenFlashChart动态报表,你需要以下几个步骤: 1. **设置环境**:确保你的开发环境中...

    OpenFlashChart .NET图表控件附示例包

    内容索引:.NET源码,控件组件,OpenFlashChart,图表,控件 OpenFlashChart是一款开源免费的图表组件,同时结合了flash和Javascript技术,可以创建一些具有动感效果的报表分析图表,而且它还能够很好的与浏览器进行集成...

    Openflashchart

    6. **API使用**:OpenFlashChart提供了一套JavaScript API,允许在客户端进一步操作图表,如动态加载数据、响应用户事件等。 7. **集成到ASP.NET**:在ASP.NET项目中,可以使用C#或VB.NET代码创建OpenFlashChart...

    OpenFlashChart实现多图表无闪烁动态更新代码

    为避免这种情况,开发者可以利用OpenFlashChart的异步更新功能,通过AJAX或者Websocket等技术实时获取后台数据,然后在前端用新的数据替换旧的数据,而不是重新绘制整个图表,从而达到无闪烁的效果。 多图展示则...

    flex的报表工具,开源的OpenFlashChar

    OpenFlashChart是一款基于Flex技术的开源报表工具,它允许开发者创建出丰富、动态且交互性强的图表。在Flex编程环境中,数据可视化是一个重要的部分,OpenFlashChart为开发人员提供了便捷的方式来展示复杂的数据集,...

    OpenFlashChart 代码及例子

    OpenFlashChart是一款强大的图表生成库,专为网页开发者设计,特别是在Java环境中用于JSP应用。它利用Flash技术创建美观、动态且交互式的图表,能够帮助开发者轻松地在网站上展示数据,提供丰富的可视化效果。这款...

    Openflashchart实现多图表无闪烁自动刷新

    在本文中,我们将深入探讨如何使用OpenFlashChart实现在网页上展示多个图表,并实现无闪烁的自动刷新功能,同时还会涉及如何在Java后端支持这一过程。 首先,了解OpenFlashChart的基本概念是必要的。OFC通过XML或...

    openFlashChart 实例及使用文档.rar

    在报表制作中,OpenFlashChart特别适用于以下场景: 1. **数据分析**:通过直观的图表展示复杂的数据,帮助用户理解和分析数据。 2. **仪表盘**:创建包含多个图表的仪表盘,以全面展示关键性能指标。 3. **实时...

    OpenFlashChart控件示例

    OpenFlashChart是一款强大的开源Flash图表库,用于生成各种动态、美观的数据可视化图表。这个控件在Web开发中尤其受欢迎,因为它允许开发者通过简单的API创建出交互式的统计图表,且兼容多种编程语言,如PHP、ASP...

    图表控件OpenFlashChart

    使用OpenFlashChart创建图表的基本步骤如下: 1. **创建数据源**:在C#中准备数据,可以是数组、列表或者其他集合类型,每个元素代表一个图表数据点。 2. **序列化数据为JSON**:使用JSON库将数据源转换为JSON字符...

    Openflashchart很好的图表开源工具

    OpenFlashChart是一款优秀的开源图表工具,专为开发者设计,用于创建动态、美观的数据可视化效果。在Java、Flash技术的支持下,它能够呈现曲线图、柱状图、饼图等多种图表类型,非常适合在Web应用程序中展示数据。...

    java开发 openflashchart 的demo 文档

    在Java开发中,为了创建美观且交互性强的图表,开发者经常使用各种报表工具。其中,OpenFlashChart是一款广泛使用的开源库,它允许开发者通过简单的API生成高质量的Flash图表。本篇将详细介绍OpenFlashChart在Java...

    图表控件openflashchart

    OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表;该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash;该组件还支持一些简单的...

    OpenFlashChart实例 + 详细讲解

    OpenFlashChart是一款强大的开源JavaScript图表库,用于在Web页面上创建动态、美观的图表。它使用Flash技术,但通过JavaScript接口与网页交互,使得开发者能够轻松地生成各种类型的图表,如折线图、柱状图、饼图、...

    openflashchart的.NET dll及js文件

    总的来说,OpenFlashChart为.NET开发者提供了一种简单而高效的方式,用以创建高质量的图表,结合.NET DLL和JS文件,可以实现服务器端数据处理与客户端图表渲染的完美结合。通过学习和掌握OpenFlashChart的使用,...

    OpenFlashChart组件的使用

    8. **使用示例**:在“OpenFlashChart组件的使用.doc”文档中,可能会包含多个示例代码,演示如何创建不同类型的图表,以及如何配置和调用它们。这些示例对于初学者来说是很好的学习资源。 9. **API详解**:...

    openflashchart

    《OpenFlashChart:一款强大的Flash图表库》 OpenFlashChart是一款开源的JavaScript图表库,它允许开发者通过简单的API创建出美观、动态的Flash图表。在Web应用中,数据可视化是至关重要的,OpenFlashChart以其易用...

    OpenFlashChart所需文件

    OpenFlashChart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、交互式的图表。它以其易用性和灵活性而受到开发者的青睐,特别是在需要展示数据可视化时。在提供的压缩包"OpenFlashChart Library"中,...

Global site tag (gtag.js) - Google Analytics