zoukankan      html  css  js  c++  java
  • 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"]
      }
    }

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wangwenhui11/archive/2009/06/19/4283571.aspx

  • 相关阅读:
    SharePoint 2013 图文开发系列之自定义字段
    SharePoint 2013 图文开发系列之Visual Studio 创建母版页
    SharePoint 2013 图文开发系列之代码定义列表
    SharePoint 2013 图文开发系列之计时器任务
    SharePoint 2013 图文开发系列之应用程序页
    SharePoint 2013 图文开发系列之事件接收器
    SharePoint 2013 图文开发系列之可视化WebPart
    SharePoint 2013 图文开发系列之WebPart
    SharePoint 2013 对二进制大型对象(BLOB)进行爬网
    SharePoint 2013 状态机工作流之日常报销示例
  • 原文地址:https://www.cnblogs.com/zhangqifeng/p/1585963.html
Copyright © 2011-2022 走看看