您的位置:首页 > 运维架构

Open Flash Chart 2 (OFC2) 实例文档 - 3 - 线图

2010-12-28 17:44 218 查看
与第一个例子中重复的参数没有给出说明,如果要查看某个参数,请在第一个例子中找。

代码:

{
"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
}
}


效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: