Open Flash Chart图表的JSON格式基本属性详解

数据文件必须是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"]
  }
}