基于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": [0], "cols": [2], "filters": [2], "values": [ { "id": 1, "label": "总计 - 销售额", "fieldIndex":1, "stats": "Sum", "format": { "decimalFlag": "on", "decimal": 2 } } ] }; View Code

webPivotTable配置参数说明:

<script type="text/javascript"> var webPivotTable = null; require(["wpt/WebPivotTable", "dojo/domReady!"], function (WebPivotTable) { webPivotTable = new WebPivotTable({ customOptions: { locale: "zh",//选择语言环境为中文 uiFlags: {//ui 配置 menuBtn: 1,//菜单按钮 dataSourceBtn: 0,//数据源按钮 languageSwitchBtn: 0,//语言选择按钮 helpBtn: 0,//帮助按钮 pivotFieldsPaneBtn: 1,//控制"列选择面板"的按钮显示或者隐藏 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: "2" //设置是否只显示表格，或者图形 } }, "wpt-container"); var wptConfig=<%= wptConfig%>; webPivotTable.setCsvData(<%=dataFields %>, <%=datas %>,eval(wptConfig)); }); </script>

 

{ "format": "WPT", "version": "1.0", "grid": { "showSigns": 1,//行前面的+/-好 "showRowTotals": 1,//行合计 "showColTotals": 0,//列合计 "showRowSubtotals": 0,//行小计 "showColSubtotals": 0,//列小计 "compactForm": 0, "zoomScale": 1, "zoomScaleStep": 0.05, "rowHeaderWidth": 120, "cellWidth": 100, "cellHeight": 23 }, "mode": "CSV", "rows": [{0}], "cols": [{1}], "filters": [], "values": [ { "id": 1, "label": "销售件数", "fieldIndex":销售件数, "stats": "Sum", "format": { "decimalFlag": "on", "decimal": 2 } }, { "id": 1, "label": "成交笔数", "fieldIndex":成交笔数, "stats": "Sum", "format": { "decimalFlag": "on", "decimal": 2 } } ], "valuesInAxis": 0,//如果设置为-1，则value字段不会在列头显示，如果设置为0在列显示，如果设置为1则在rows里面显示。 "valuesIndex": 1 };

 

 

 

 

 

 

转载于:https://www.cnblogs.com/_fyz/p/3682405.html