java饼状图 open flash chart_open flash chart格式
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 } }
ElementsThe 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"] } }
posted on 2011-07-27 11:41 王豪 阅读(372) 评论(0) 编辑 收藏