|
| 1 | +--- |
| 2 | +category: examples |
| 3 | +group: data-analysis |
| 4 | +title: Pivot Analysis Update Subtotal Total Using Editor |
| 5 | +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-updateTotalData.gif |
| 6 | +link: data_analysis/pivot_table_dataAnalysis |
| 7 | +option: PivotTable#dataConfig.updateAggregationOnEditCell |
| 8 | +--- |
| 9 | + |
| 10 | +# Pivot Analysis - Update Subtotal Total Using Editor |
| 11 | + |
| 12 | +To summarize table data in pivot analysis, configure totals in dataConfig to set the total subtotal of the row and column dimensions, and configure updateAggregationOnEditCell to true to update the subtotal total when editing the cell. |
| 13 | + |
| 14 | +## Key Configurations |
| 15 | + |
| 16 | +- `PivotTable` |
| 17 | +- `columns` |
| 18 | +- `rows` |
| 19 | +- `indicators` |
| 20 | +- `dataConfig` |
| 21 | +- `updateAggregationOnEditCell` When updateAggregationOnEditCell is true, the subtotal total will be updated when editing the cell. |
| 22 | + |
| 23 | +## Code demo |
| 24 | + |
| 25 | +```javascript livedemo template=vtable |
| 26 | +const input_editor = new VTable_editors.InputEditor(); |
| 27 | +VTable.register.editor('input', input_editor); |
| 28 | +const sumNumberFormat = VTable.DataStatistics.numberFormat({ |
| 29 | + prefix: '$' |
| 30 | +}); |
| 31 | +const countNumberFormat = VTable.DataStatistics.numberFormat({ |
| 32 | + digitsAfterDecimal: 0, |
| 33 | + thousandsSep: '', |
| 34 | + suffix: ' orders' |
| 35 | +}); |
| 36 | +let tableInstance; |
| 37 | +fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') |
| 38 | + .then(res => res.json()) |
| 39 | + .then(data => { |
| 40 | + const option = { |
| 41 | + records: data, |
| 42 | + rows: [ |
| 43 | + { |
| 44 | + dimensionKey: 'Category', |
| 45 | + title: 'Category', |
| 46 | + headerStyle: { |
| 47 | + textStick: true |
| 48 | + }, |
| 49 | + width: 'auto' |
| 50 | + }, |
| 51 | + { |
| 52 | + dimensionKey: 'Sub-Category', |
| 53 | + title: 'Sub-Catogery', |
| 54 | + headerStyle: { |
| 55 | + textStick: true |
| 56 | + }, |
| 57 | + width: 'auto' |
| 58 | + } |
| 59 | + ], |
| 60 | + columns: [ |
| 61 | + { |
| 62 | + dimensionKey: 'Region', |
| 63 | + title: 'Region', |
| 64 | + headerStyle: { |
| 65 | + textStick: true |
| 66 | + }, |
| 67 | + width: 'auto' |
| 68 | + }, |
| 69 | + { |
| 70 | + dimensionKey: 'Segment', |
| 71 | + title: 'Segment', |
| 72 | + headerStyle: { |
| 73 | + textStick: true |
| 74 | + }, |
| 75 | + width: 'auto' |
| 76 | + } |
| 77 | + ], |
| 78 | + indicators: ['TotalSales', 'OrderCount', 'AverageOrderSales', 'MaxOrderSales', 'MinOrderSales'], |
| 79 | + corner: { |
| 80 | + titleOnDimension: 'row', |
| 81 | + headerStyle: { |
| 82 | + textStick: true |
| 83 | + } |
| 84 | + }, |
| 85 | + dataConfig: { |
| 86 | + updateAggregationOnEditCell: true, |
| 87 | + aggregationRules: [ |
| 88 | + //做聚合计算的依据，如销售额如果没有配置则默认按聚合sum计算结果显示单元格内容 |
| 89 | + { |
| 90 | + indicatorKey: 'TotalSales', //指标名称 |
| 91 | + field: 'Sales', //指标依据字段 |
| 92 | + aggregationType: VTable.TYPES.AggregationType.SUM, //计算类型 |
| 93 | + formatFun: sumNumberFormat |
| 94 | + }, |
| 95 | + { |
| 96 | + indicatorKey: 'OrderCount', //指标名称 |
| 97 | + field: 'Sales', //指标依据字段 |
| 98 | + aggregationType: VTable.TYPES.AggregationType.COUNT, //计算类型 |
| 99 | + formatFun: countNumberFormat |
| 100 | + }, |
| 101 | + { |
| 102 | + indicatorKey: 'AverageOrderSales', //指标名称 |
| 103 | + field: 'Sales', //指标依据字段 |
| 104 | + aggregationType: VTable.TYPES.AggregationType.AVG, //计算类型 |
| 105 | + formatFun: sumNumberFormat |
| 106 | + }, |
| 107 | + { |
| 108 | + indicatorKey: 'MaxOrderSales', //指标名称 |
| 109 | + field: 'Sales', //指标依据字段 |
| 110 | + aggregationType: VTable.TYPES.AggregationType.MAX, //计算类型 |
| 111 | + formatFun: sumNumberFormat |
| 112 | + }, |
| 113 | + { |
| 114 | + indicatorKey: 'MinOrderSales', //指标名称 |
| 115 | + field: 'Sales', //指标依据字段 |
| 116 | + aggregationType: VTable.TYPES.AggregationType.MIN, //计算类型 |
| 117 | + formatFun: sumNumberFormat |
| 118 | + } |
| 119 | + ], |
| 120 | + totals: { |
| 121 | + row: { |
| 122 | + showGrandTotals: true, |
| 123 | + grandTotalLabel: '行总计' |
| 124 | + }, |
| 125 | + column: { |
| 126 | + showGrandTotals: true, |
| 127 | + grandTotalLabel: '列总计' |
| 128 | + } |
| 129 | + } |
| 130 | + }, |
| 131 | + editor: 'input', |
| 132 | + widthMode: 'autoWidth' |
| 133 | + }; |
| 134 | + tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option); |
| 135 | + window.tableInstance = tableInstance; |
| 136 | + }); |
| 137 | +``` |
0 commit comments