基于webpivottable做的透视表

时间:2023-03-09 15:41:52
基于webpivottable做的透视表

1、绑定数据和配置:

var wptConfig=<%= wptConfig%>;

webPivotTable.setCsvData(<%=dataFields %>, <%=datas %>,eval(wptConfig));

三个参数依次对应列,数据源,配置文件,列是指定的一个数组,格式:["a","b"],数据的格式:[["a","b"],["c","d"]],配置文件是一个JSON,格式如下:

 var cfg = {
"format": "WPT",
"version": "1.0",
"rows": [],
"cols": [],
"filters": [],
"values": [
{
"id": ,
"label": "总计 - 销售额",
"fieldIndex":,
"stats": "Sum",
"format": {
"decimalFlag": "on",
"decimal":
}
}
]
};

webPivotTable配置参数说明:

    <script type="text/javascript">
var webPivotTable = null;
require(["wpt/WebPivotTable", "dojo/domReady!"], function (WebPivotTable) { webPivotTable = new WebPivotTable({
customOptions: {
locale: "zh",//选择语言环境为中文
uiFlags: {//ui 配置
menuBtn: ,//菜单按钮
dataSourceBtn: ,//数据源按钮
languageSwitchBtn: ,//语言选择按钮
helpBtn: ,//帮助按钮
pivotFieldsPaneBtn: ,//控制"列选择面板"的按钮显示或者隐藏
aboutBtn: 0//关于按钮
},      

pivotFields: { //Pivot Fields List pane //设置透视Fields的格式,显示或者隐藏等
show: 0, // show/hide: 1/0
position:"right", // position: "left", "top", "right", "bottom"
stacked: 0, //stack fields area or not: 1/0
width:300, // width, only for left and right
height:200 // height, only for top and bottom
},

expandRows: 0,//行是否展开
expandCols: 1,//列是否展开

                    pivotLayout: ""        //设置是否只显示表格,或者图形
}
}, "wpt-container");
var wptConfig=<%= wptConfig%>; webPivotTable.setCsvData(<%=dataFields %>, <%=datas %>,eval(wptConfig));
});
</script>
 {
"format": "WPT",
"version": "1.0",
"grid": {
"showSigns": ,//行前面的+/-好
"showRowTotals": ,//行合计
"showColTotals": ,//列合计
"showRowSubtotals": ,//行小计
"showColSubtotals": ,//列小计
"compactForm": ,
"zoomScale": ,
"zoomScaleStep": 0.05,
"rowHeaderWidth": ,
"cellWidth": ,
"cellHeight":
},
"mode": "CSV",
"rows": [{}],
"cols": [{}],
"filters": [],
"values": [
{
"id": ,
"label": "销售件数",
"fieldIndex":销售件数,
"stats": "Sum",
"format": {
"decimalFlag": "on",
"decimal":
}
},
{
"id": ,
"label": "成交笔数",
"fieldIndex":成交笔数,
"stats": "Sum",
"format": {
"decimalFlag": "on",
"decimal":
}
}
],
"valuesInAxis": ,//如果设置为-1,则value字段不会在列头显示,如果设置为0在列显示,如果设置为1则在rows里面显示。
"valuesIndex":
};