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)  编辑  收藏