JSON Format: For library writers
The data must be in JSON format. The basic JSON obect is:
{}
Put all other objects inside this. For example the JSON object with a title looks like this:
{ "title":{ "text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" } }
Title (optional)
All attributes are optional.
text: string, the title
style: string, the CSS style
Example:
{ "title":{ "text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" } }
Y Legend (optional)
All attributes are optional.
text: string, the title for the Y axis
style: string, a CSS string
Example:
{ "y_legend":{ "text": "Open Flash Chart", "style": "{color: #736AFF; font-size: 12px;}" } }
X Axis (optional)
This object is optional, if it is not present the chart will show a default X axis.
All attributes are optional.
stroke : number, the width of the line
tick-height : number, the height of the ticks
colour : string, the colour of the line
offset: boolean, x axis min (usually 0) is offset, used in bar charts
grid-colour: string, colour of the grid lines
3d: boolean, is it 3D
steps: show every n ticks
labels: array of strings, the labels of each X point
Example:
{ "x_axis":{ "stroke": 1, "tick_height": 10, "colour": "#d000d0", "grid_colour": "#00ff00",
"labels": ["January","February","March","April","May","June","July","August","Spetember"] } }
Y Axis optional
This object is optional, if it is not present the chart will show a default Y axis.
All attributes are optional.
Example:
{ "y_axis":{ "stroke": 4, "tick_length": 3, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 20 } }
Elements
The elements attribute is an array of generic objects.
Each object is the type of chart (line, bar, scatter etc.)
Example:
{ "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
A bar chart. Must be inside the elements array.
type: string, must be 'bar'
alpha: number, between 0 (transparent) and 1 (opaque)
colour: string, CSS colour
text: string, the key
font-size: number, size of the key text
values: array of numbers, height of each bar
Example:
{ "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
A pie chart. Must be inside the elements array.
type: string, must be 'pie'
start-angle: number, the angle of the first pie slice
colours: array of strings, CSS colour
alpha: number, between 0 (transparent) and 1 (opaque)
stroke: number, the outline width
animate: boolean, animate the pie chart
values: array of objects, value of each pie slice. May be a number or a slice object
Example:
{ "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
Horizontal Bar chart
values: array of objects. Each value must have a "right" and an optional "left" value
Example:
{ "elements":[ { "type": "hbar", "colour": "#9933CC", "text": "Page views", "font-size": 10,
"values" : [{"right":10},{"right":15},{"left":13,"right":17}] } ] }
Elements.line_dot
Line chart
values: Array of numbers:
Example: { "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*
Just a quick note of the 3 different line types:
Example:
{ "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"] } }
Examples
Here is a simple JSON object that contains a horizontal bar chart:
{ "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"] } }
分享到:
相关推荐
open flash chart库,用于php开发中图表的制作,很炫的说~
找了半天的open flash chart api没找到,最后终于找到了,希望对大家有用
Open Flash Chart,制作图表,柱状图,饼图,线点图,
Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。 附带PDF说明文档,是中文版...
这里面有两个java代码工程和 Open Flash Chart API。工程都是调试过的直接导入可用,代码都有详细的注释,如果你真是想用到报表之类的东西,肯定很不错了。 工程所需的jar 包 js文件都有,基本上很全。 第一步:...
包含一些页面和demo。各类常用图形的简单实现例子。
由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...
完整的open flash chart 。绝对完整。绝对可以看效果。 完整的open flash chart 。绝对完整。绝对可以看效果。
Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。
文件由官方提供的open-flash-chart-2-Lug-Wyrm-Charmer.zip原版文件,仅修改支持透明的flash的swfobject.js,原文件也在压缩包内。 增加方便调用示例文件的index.php和index.asp,其它文件未做任何改动。 php环境请...
OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表; 该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash; 该组件还支持一些简单...
RCP Open Flash Chart 在Eclipse RCP中使用Open Flash Chart的例子
jfreechart and open flash chart整理jfreechart and open flash chart整理
open flash chart ,open flash chart ,flash 图表,open flash chart 1.9,java源代码
Open Flash Chart java例子 eclipse 测试通过 直接下载解压导入eclipse就OK了。
open-flash-chart2系列教程
web工程open flash chart 实例 open flash chart demo js 实现 open flash chart 数据采用json格式
open flash chart 亲自测试 成功
open flash chart 亲自测试 成功
open flash chart 亲自测试 成功