Open+Flash+Chart+2+(OFC2)+实例文档

{
  "y_legend":{
    "text":   "Time of day",
    "style": "{color: #736AFF;}"
  },

  "elements":[
    {
      "type":"line",
      "colour":"#736AFF",
      "text":"Avg. wave height (cm)",
      "font-size":10,
      "width":2,
      "on-show":{
          "type":"shrink-in",	/* 从大变小 */
       /* "type":"fade-in",		逐渐现形 */
       /* "type":"drop",		从上掉落 */
       /* "type":"mid-slide",	以中心线弯曲形成 */
       /* "type":"explode",		从中心弹出 */
       /* "type":"pop-up",		向上弹出 */
          "cascade":1,
          "delay":0.5
      },
      "line-style":{		/* 线的样式 */
          "style":"dash",		/* 虚线类型,默认为 solid */
          "on":10,		/* 实线部分长度 */
          "off":5		/* 空白部分长度 */
      },
	  "dot-style":{
	      "type":"anchor",	/* 多边形类型 */
	      "sides":3,		/* 边的个数 */
	      "alpha":1,		/* 透明度 */
	      "hollow":true,	/* 是否空心 */
	      "background-colour":"#a44a80",	/* 背景色 */
		  "background-alpha": 0.4,			/* 背景透明度 */
		  "width":2,						/* 边的粗细 */
		  "tip":"type = anchor/nsides = 3/nhollow"		/* 鼠标提示信息 */
	  },
      "values" :   [
			1.5,1.69,1.88,2.06,2.21,2.34,2.43,
			2.48,2.49,2.47,2.40,2.30,2.17,2.01,
			1.83,1.64,1.44,1.24,1.05,
			{"value" :0.88, "type":"bow", "dot-size":10},
			{"value" :0.74, "type":"bow", "colour":"#00FF00", "dot-size":12, "hollow":false},
			0.62,0.54,0.50,0.50,0.54,0.61,0.72,
			0.86,1.03,1.22,1.41,1.61,1.81,1.99,
			2.15,2.29,2.39,2.46,2.49,
			{
			    "value" :2.48,
			    "type":"star",		/* 五角星 */
			    "colour":"#FF0000",	/* 边颜色 */
			    "dot-size":10,		/* 大小 */
			    "rotation":30,		/* 旋转角度 */
			    "hollow":true,		/* 是否空心 */
			    "halo-size":12		/* 光晕大小 */
			},
			2.44,
			{"value" :2.35, "type":"dot", "colour":"#FF0000"},		/* 普通点,只在鼠标滑过时显示 */
			{"value" :2.23, "type":"solid-dot", "colour":"#00FF00"},	/* 实心点 */
			{"value" :2.08, "type":"hollow-dot", "colour":"#FF00FF"}]	/* 空心点 */
    }
  ],

  "x_axis":{
    "labels":{
        "rotate": 90,
        "labels":["2:00am","2:10","2:20","2:30","2:40","2:50",
              "3:00am","3:10","3:20","3:30","3:40","3:50",
              "4:00am","4:10","4:20","4:30","4:40","4:50",
              "5:00am","5:10","5:20","5:30","5:40","5:50",
              "6:00am","6:10","6:20","6:30","6:40","6:50",
              "7:00am","7:10","7:20","7:30","7:40","7:50",
              "8:00am","8:10","8:20","8:30","8:40","8:50",
              "9:00am","9:10","9:20"]
    }
  },

  "y_axis":{
    "max":   3
  }
}

{ "title":{ "text":"Pie for you sir?", "style":"{font-size: 30px;}" }, "elements":[ { "type":"pie", "colours":["0x336699", "0x88AACC", "0x999933", "0x666699","0xCC9933", "0x006666", "0x3399FF", "0x993300","0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC","0x663366", "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果,可以直接指定true启用默认动画效果 */ { "type":"bounce", /* 鼠标滑过时,使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时,使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff", /* 标签颜色 */ "start-angle":90, /* 开始旋转角度 */ "no-labels":false, /* 是否显示标签 */ "values":[ 2, 3, {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://www.baidu.com"}, {"value":6.5,"on-click":"my_function"} ] } ]}


{ "title":{ "text":"Pie for you sir?", "style":"{font-size: 30px;}" }, "elements":[ { "type":"pie", "colours":["0x336699", "0x88AACC", "0x999933", "0x666699","0xCC9933", "0x006666", "0x3399FF", "0x993300","0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC","0x663366", "0x9999CC", "0xAAAAAA", "0x669999","0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC","0x99CCCC", "0x999999", "0xFFCC00", "0x009999","0x99CC33", "0xFF9900", "0x999966", "0x66CCCC","0x339966", "0xCCCC33"], "alpha":0.8, "animate":[ /* 动画效果,可以直接指定true启用默认动画效果 */ { "type":"bounce", /* 鼠标滑过时,使用弹跳效果 */ "distance":20 /* 弹跳距离 */ }, { "type":"fade" /* 鼠标滑过时,使用颜色变深效果 */ } ], "radius": 150, /* 半径长度 */ "tip":"#val#<br>#total#<br>#percent#<br>#label#", /* 鼠标提示信息 */ "gradient-fill":true, /* 颜色渐变效果 */ "label-colour":"#0000ff", /* 标签颜色 */ "start-angle":90, /* 开始旋转角度 */ "no-labels":false, /* 是否显示标签 */ "values":[ 2, 3, {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://www.baidu.com"}, {"value":6.5,"on-click":"my_function"} ] } ]}


{ "title":{ "text": "Many data lines", "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" }, "y_legend":{ "text": "Open Flash Chart", "style": "{color: #736AFF; font-size: 12px;}" }, "elements":[ { "type": "bar", "alpha": 0.5, "colour": "#9933CC", "text": "Page views", "font-size": 10, "on-show": { /* 展现样式 */ "type":"pop", /* 弹出方式, pop-up */ /* "type":"pop-up" 向上弹出 */ "cascade":1, /* 不通柱子之间的间隔时间为 1 */ "delay":1.5 /* 延迟时间 */ }, "values" : [900,60,1700,1900,500, { "top":700, "bottom":200, "colour":"#A03030", "tip":"#top#<br>hello", "on-click":"#" }, 600,null,1700] }, { "type": "bar_glass", "alpha": 0.7, "colour": "#CC9933", "text": "Page views 2", "font-size": 10, "on-show": { "type":"drop", /* 掉落方式 */ /* "type":"fade-in" 逐渐现形 */ "cascade":0.9 /* 不通柱子之间的间隔时间为 0.9 */ }, "values" : [400,900,60,700,1900,500,700,1600,900] }, { "type": "bar_3d", "alpha": 0.9, "colour": "#CC99ff", "text": "Page views 2", "font-size": 10, "on-show": { "type":"grow-down", /* 向下生长 */ /* "type":"grow-up" 向上生长 */ "cascade":0.9 /* 不通柱子之间的间隔时间为 0.9 */ }, "values" : [1800,60,200,40,900,1600,700,900,1500] } ], "x_axis":{ "stroke":2, "tick-height":20, "3d":5, "colour":"#df90d0", "grid_colour":"#00ff00", "labels" : {"labels": ["January","February","March","April","May", "June","July","August","Spetember"]} }, "y_axis":{ "stroke": 5, "tick-length": 10, "colour": "#d000d0", "grid_colour": "#00ff00", "offset": 0, "max": 2000 }}



 
{
  /* 图表标题 */
  "title" : {
    "text" : "Many data lines", 		/* 标题文本 */
    "style" : "{font-size: 30px;}"	/* CSS样式 */
  },

   "is_decimal_separator_comma": 0,		/* (0/1),是否用逗号替换小数点 */
   "is_fixed_num_decimals_forced": 1,	/* (0/1),是否强制小数点后面的位数 */
   "num_decimals":3,		/* 精度,即小数点后面的位数,需要配合上面参数一起使用 */
   "is_thousand_separator_disabled": 0,		/* (0/1),是否使用千位分隔符 */

  /* X轴标题(X轴下方) */
  "x_legend" : {
    "text" : "x_legend",				/* 标题文本 */
    "style" : "{font-size: 12px; color:#736AFF;}"		/* CSS样式 */
  },

  /* Y轴标题(Y轴左方) */
  "y_legend" : {
    "text" : "y_legend",				/* 标题文本 */
    "style" : "{font-size: 12px; color:#2F55FF;}"		/* CSS样式 */
  },

  /* X轴 */
  "x_axis" : {
    "stroke" : 2,					/* X轴的粗细 */
	"tick-height" : 15,				/* X轴刻度的长度 */
	"colour" : "#df0fd0",			/* 颜色 */
    "grid-colour": "#00ff00",		/* 网格线的颜色 */
	"offset" : 1,					/* (0/1), 是否根据数据图形和标签的宽度进行延展 */
	"3d" : 0,						/* 显示3D */
	"steps" : 0.5,					/* 刻度间隔 */
	"min":0,
	"max":8,
    "labels": {
		"rotate": "vertical",			/* 垂直方向显示标签 */
		"size":13,						/* 字体大小 */
		"steps": 2,						/* 整数,标签间隔 */
		"visible-steps": 3,				/* 可见标签间隔,会覆盖上面参数 */
		"align":"center",				/* 旋转的标签居中对齐,默认是较高的一端对其到刻度上 */
        "labels": [
            "January",
            {"text":"February", "visible":true, "colour":"ff0000", "rotate":-60},
            "March",
            {"text":"April","colour":"#00D000"},
            "May","June","July","August","September"]
    }
  },

  /* Y轴 */
  "y_axis":{
    "stroke":      4,
    "tick-length": 3,
    "colour":      "#d000d0",
    "grid-colour": "#00ff00",
    "offset":      0,
    "max":         20
  },

  /* 数据元素 */
  "elements":[
    {
      "type":      "bar",	/* 关于柱图类型参考“bar-all-onlick.json” (从官网下载ofc2完整包的话可以找到这个文件)*/
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "on-show":	{		/* 展现样式 */
          "type": "pop",		/* 弹出方式, 此外还有 drop 和 grow-up */
          "cascade":1,			/* 不通柱子之间的间隔时间为 1 */
          "delay":0.5			/* 延迟时间 */
      },
      "values" :   [9,6,7,9,5,{"top":7,"bottom":2,"colour":"#A03030","tip":"#top#<br>hello/n#val#","on-click":"#"},6,null,7]
    },
    {
      "type":      "line",			/* 展示类型 —— 折线图 */
      "colour":    "#9933CC",		/* 线条颜色 */
      "width":     2,				/* 线条粗细 */
      "text":      "Page views",	/* 数据标题(Y轴上方) */
      "font-size": 10,				/* 数据标题字体大小 */
      "dot-size":  6,
      "values" :   [15,18,19,14,17,18,15,18,17]
    }],

  /* 鼠标提示信息 */
  "tooltip":{
    "shadow":true,		/* 提示框影子 */
    "mouse":2,			/* 1 - 滑动样式,2 - 非滑动样式,折线图不支持*/
    "stroke":5,			/* 边框粗细 */
    "rounded": 12,		/* 边角圆滑程度 */
    "colour":"#00d000",	/* 边框颜色 */
    "background":"#d0d0ff",		/* 背景颜色 */
    "title":"{font-size: 14px; color: #905050;}",		/* 标题样式 */
    "body":"{font-size: 10px; font-weight: bold; color: #9090ff;}"		/* 本体样式 */
  }
}


 

 

 

下面的例子中使用了一些常用的参数。

 

 

 

 


 
 

            
阅读更多
个人分类: 其他
想对作者说点什么? 我来说一句

软件开发全套文档范例

2009年11月23日 117KB 下载

软件开发详细设计文档模板

2016年05月11日 1.45MB 下载

各种软件工程文档实例

2010年09月15日 10.19MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭