Pillar类的文档
本功能类是建立在JQUERY1.3.2的基础之上
//feature:
//1.柱状图的各种柱形类型、颜色、名称及总数量均可自定义
//2.柱形图所用的坐标系也能自定义
//3.坐标系上最多可显示多少组柱状图也可自定义
//4.柱形图载入方式有一次性全部载入和单步载入两种，而单步载入时，又可根据条件判断是否移除最左边（时间最早的）那条组柱状图。
//5.数据载入的方法分为本地载入JSON和远程载入JSON两种，而远程载入时，则采用JSONP方式，这样就可实现跨域
构造函数：var map1=new PillarMap($('#map1'),maxLevel,minLevel,step,stepPy,coorWidth);
变量属性定义:（这些属性都可以直接访问和编辑）
this.bgDiv : 最父框架的DIV(用$('#id'))的JQUERY方法来选取
this.contentDiv : 储放柱状图内容的DIV
this.maxLevel : 定义最高的点,建议步进数的整数倍
this.minLevel : 定义最小的点
this.step : 定义柱状图背景每一行的步进数
this.stepPy : 定义每一行步进时，屏幕显示的像素高度
this.coorHeight : 柱状图背景坐标系的总高度
this.coorWidth : 柱状图背景坐标系的宽度*/
this.notice : 数据种类的详细
this.kindNum : 数据种类数量
this.textWidth : 每组数据文字说明所在DIV的宽度,默认为80
this.kuangWidth : 每组数据的各个柱状图连在一起后的总宽度
this.maxDataLimit : 设定柱状图表坐标系中，最多保持多少组数据，默认：0为不限制，可直接修改
this.dataSize : 现有数据组的数量；初始为0，用户可根据需要来加减
方法定义：
initTitle(title,units) : 初始化柱状图的标题及单位
initCoorAndGrage() : 初始化柱状图的坐标系
setDataKind(dataKind,noteWide) : 初始化柱状图的数据种类数量 noteWide为用户自定义的坐标系宽度，dataKind为一种JSON数据类型
setDataKindFromJs(pillarMap,url,noteWide) : 通过远程读取JS文件来获得dataKind然后再初始化(pillarMap为一个Pillar类的对象)
loadJson(data) : 正式一次性载入JSON数据的方法,data为一种JSON数据类型
loagStepSimpleData=function(simpleData,clearFirst) : //采用步进方式（如每组数据都是不同时间段且定时更新出来的数据）单步载入单条数据的方法
//clearFirst为BOOL型变量，它决定在步进方式读取单组数据时，只有当this.maxDataLimit>0时这个项才有意义,且坐标中的数据数组已经达到了maxDataLimit,是否把柱状图中原有数据中的左边第一条最原始数据
jsonpLoadStepSimpleData(pillarMap,url,param,clearFirst)远程用JSONP实现跨域读取单步进JSON数据的方法(pillarMap为一个Pillar类的对象)
jsonpLoadJson(pillarMap,url,param)远程用JSONP实现跨域读取一次性所有JSON数据的方法(pillarMap为一个Pillar类的对象)
clearContent() : 清除坐标中所有的柱状图组
delGroupByIndex(n) : 删除坐标中第N个柱状图组
<!-- 注:删除坐标中最右边一个柱状图组,可以用的方式为delGroupByIndex(this.dataSize) -->
上面提到的几种JSON数据类型的结构：
1.data
//定义从服务器端接受的数据JSON格式
var data=[
{id:'d1',text:'1组：忍者龟',items:[700,780,500,290,180]},//注意：data数组中每个数的顺序必须与dataKindk中的各元素定义的排列顺序相同，且总数也要相同
{id:'d2',text:'2组：金刚狼',items:[700,850,120,90,180]},
{id:'d3',text:'3组：卡卡罗特',items:[900,900,500,200,180]},
{id:'d4',text:'4组：蠢爸爸',items:[150,100,900,900,180]},
{id:'d5',text:'5组：动感超人',items:[300,300,200,80,-200]}
];
2.dataKind
//定义条状图的种类可在页面初始化时，由JS动态载入,但在动态载入的JSP文件中,此JSON变量的变量为仍必须为dataKind !
var dataKind={
0:{label:'攻击力',color:'#FFCC00'},
1:{label:'防御力',color:'#FF3300'},
2:{label:'幽默感',color:'#00FF00'},
3:{label:'猥琐程度',color:'#FF00FF'},
4:{label:'智商情商',color:'#0099FF'}
}
3.simpleData
//定义从服务器端接受的单组数据JSON格式
var simpleData={id:'d1',text:'6组：忍者龟',items:[700,780,500,290,180]};//实际上它就是data数组的一个单元
- 1
- 2
- 3
- 4
前往页