flex - 创建数据透视或表格报告的方法？

Question

寻找一些关于从 Flash Builder / Flex 4 创建报告的想法、策略、工具等。

我有一个 Flex 应用程序，允许从后端数据库创建/读取/更新/删除客户信息。它使用 Web 服务（zend amf -> mongo db 或 mysql）。例如，我已经通过网络服务将客户端数据作为集合存储在 Flex 中。

用户请求能够生成报告 - 在表格 Excel 样式网格（最有可能是数据网格）中显示特定年龄以下的客户列表。它将按人口统计（例如“保险类型”）进行排序和小计。理想情况下，用户希望能够选择报告（或数据网格/数据透视表）中允许的保险类型。

我知道一个选择是向用户提供一系列复选框或多选列表来选择保险类型。然后，向他们提供数据网格或高级数据网格组件来显示“报告”。

人们还使用过哪些其他技术、选项或组件？

Answer 1

你将无法避免你必须自己做一些工作的事实。您的解决方案对于商业选项来说过于定制，因为只有您知道要显示的数据。

您需要创建某种界面，让用户可以在报告中说出他想要的内容，同时 Flex 查询服务、获取需要显示的数据并知道如何正确显示它。您需要弄清楚每个部分才能发挥作用。

Answer 2

我想我会将其发布为答案，希望人们可以贡献其他解决方案：

到目前为止我找到的报告解决方案：

• OLAP 数据网格组件 (http://livedocs.adobe.com/flex/3/html/help .html?content=olapdatagrid_2.html) - 与高级数据网格相比，它的优势是什么？

• MecGrid (http://www.mechansp.com/prod_mecgrid.php) 看起来免费？

• flexreport (http://code.google.com/p/flexreport/) 开源（它会进行数据透视吗？）

• daoflex 过时的 Flex 2，但基于 Java 代码生成 Flex 应用程序

• 商业选项 - 我有看到了一些具有枢轴功能的数据网格组件的不同商业选项，但我希望有一个免费或内置的解决方案
  提到他们，

  • www.flexmonster.com 制作了一个数据透视表组件
  • www.flexicious.com - 高级数据网格/数据透视表样式组件
  • FlexBI、ClearBI、Clear Toolkit、Super Grid 和 Farata Systems 的其他产品 (http://sourceforge.net/projects/cleartoolkit/) 看起来曾经是开源的，也许其中一些仍然是开源的，但有些看起来很商业化

Answer 3

也看看这里的示例：

http://www.adobe.com /devnet-apps/flex/tourdeflex/web/

选择数据可视化，然后选择 Flex Monster 文件夹下的数据透视表和图表。

那里有大量的信息和样本。

一个样本：

<?xml version="1.0" encoding="utf-8"?>

        import mx.containers.TitleWindow;
        import mx.controls.Alert;
        import mx.core.FlexGlobals;
        import mx.events.CloseEvent;
        import mx.managers.PopUpManager;
        import mx.utils.ObjectUtil;

        private function get swfFilePath():String {
            // Flex 4
            return (FlexGlobals.topLevelApplication.parameters['swfFilePath'] == null) ? 'flexmonster/' : FlexGlobals.topLevelApplication.parameters['swfFilePath']; 
            // Flex 3

// return (Application.application.parameters['swfFilePath'] == null) ? 'flexmonster/' : Application.application.parameters['swfFilePath'];
}

         private function addStructure():void {
            apiPivot.addDimension("[Geography]", "Geography");
            apiPivot.addDimension("[Product]", "Product");
            apiPivot.addHierarchy("[Geography]", "[Geography].[Country]", "Country");
            apiPivot.addHierarchy("[Product]", "[Product].[Color]", "Color");
            apiPivot.addHierarchy("[Product]", "[Product].[Category]", "Category");
            apiPivot.addMeasure("[Measures].[Price]", "Price");
            apiPivot.addMeasure("[Measures].[Discount]", "Discount", AggregationName.COUNT);                
        }

        private function addData():void {
            this.clearData();
            this.addStructure();

            var dataRecord:Object = {"[Geography].[Country]": "Australia", "[Product].[Color]": "red", "[Product].[Category]": "Car", "[Measures].[Price]": 123, "[Measures].[Discount]": 10};
            apiPivot.addDataRecord(dataRecord);
            var dataRecord1:Object = {"[Geography].[Country]": "Australia", "[Product].[Color]": "red", "[Product].[Category]": "Book", "[Measures].[Price]": 34.32, "[Measures].[Discount]": 28};
            apiPivot.addDataRecord(dataRecord1);
            var dataRecord2:Object = {"[Geography].[Country]": "Australia", "[Product].[Color]": "blue", "[Product].[Category]": "Book", "[Measures].[Price]": 19.20, "[Measures].[Discount]": 16};
            apiPivot.addDataRecord(dataRecord2);
            var dataRecord3:Object = {"[Geography].[Country]": "Canada", "[Product].[Color]": "green", "[Product].[Category]": "Byke", "[Measures].[Price]": 19.45, "[Measures].[Discount]": 46};
            apiPivot.addDataRecord(dataRecord3);
            var dataRecord4:Object = {"[Geography].[Country]": "Canada", "[Product].[Color]": "red", "[Product].[Category]": "Byke", "[Measures].[Price]": 78.45, "[Measures].[Discount]": 12};
            apiPivot.addDataRecord(dataRecord4);
            var dataRecord5:Object = {"[Geography].[Country]": "Canada", "[Product].[Color]": "red", "[Product].[Category]": "Book", "[Measures].[Price]": 87.45, "[Measures].[Discount]": 9};
            apiPivot.addDataRecord(dataRecord5);
            var dataRecord6:Object = {"[Geography].[Country]": "France", "[Product].[Color]": "white", "[Product].[Category]": "Byke", "[Measures].[Price]": 8.45, "[Measures].[Discount]": 34};
            apiPivot.addDataRecord(dataRecord6);
            var dataRecord7:Object = {"[Geography].[Country]": "France", "[Product].[Color]": "white", "[Product].[Category]": "Byke", "[Measures].[Price]": 85, "[Measures].[Discount]": 2};
            apiPivot.addDataRecord(dataRecord7);
            var dataRecord8:Object = {"[Geography].[Country]": "Canada", "[Product].[Color]": "white", "[Product].[Category]": "Byke", "[Measures].[Price]": 9.45, "[Measures].[Discount]": 6};
            apiPivot.addDataRecord(dataRecord8);
            var dataRecord9:Object = {"[Geography].[Country]": "Canada", "[Product].[Color]": "blue", "[Product].[Category]": "Byke", "[Measures].[Price]": 7.43, "[Measures].[Discount]": 21};
            apiPivot.addDataRecord(dataRecord9);

            var rows:Array = [{"uniqueName": "[Product].[Color]", "sort": "asc", "filter": {"type": "top", "quantity": 3, "measure": "[Measures].[Price]"}}, {"uniqueName": "[Product].[Category]", "sort": "asc"}];
            var columns:Array = [{"uniqueName": "[Geography].[Country]", "sort": "desc", "filter": [{"uniqueName": "[Geography].[Country].[Canada]"}, {"uniqueName": "[Geography].[Country].[Australia]"}]}];
            var pages:Array = [{"uniqueName": "[Product].[Category]"}];
            var measures:Array = [{"uniqueName": "[Measures].[Price]", "aggregation" : "Sum"}, {"uniqueName": "[Measures].[Discount]", "aggregation" : "Count"}];
            var report:ReportValueObject = new ReportValueObject(rows, columns, pages, measures);            
            apiPivot.currencySymbol = "$";
            apiPivot.report = report;
            apiPivot.load();
        }

        private function addStructure1():void {
            apiPivot.addDimension("[谷歌搜索]", "谷歌搜索");
            apiPivot.addDimension("[轻松购物]", "轻松购物");
            apiPivot.addHierarchy("[谷歌搜索]", "[谷歌搜索].[安踏鞋]", "安踏鞋");
            apiPivot.addHierarchy("[轻松购物]", "[轻松购物].[短裤]", "短裤");
            apiPivot.addHierarchy("[轻松购物]", "[轻松购物].[上网本]", "上网本");
            apiPivot.addMeasure("[Measures].[音箱]", "音箱");
            apiPivot.addMeasure("[Measures].[内裤]", "内裤", AggregationName.COUNT);                
        }

        private function addData1():void {
            this.clearData();
            this.addStructure1();
            var array:Array = [
                    ["松购", "踏鞋", "谷歌", 89, 34],
                    ["松购", "音", "浴缸", 77, 83],
                    ["搜索", "踏鞋", "谷歌", 78, 67],
                    ["松购", "踏鞋", "浴缸", 3, 90],
                    ["搜索", "音", "谷歌", 33, 54],
                    ["网本", "内", "帮助", 122, 6]
                ];
            apiPivot.addDataArray(array);

            var rows:Array = [{"uniqueName": "[谷歌搜索].[安踏鞋]", "sort": "asc"}, {"uniqueName": "[轻松购物].[短裤]", "sort": "asc"}];
            var columns:Array = [{"uniqueName": "[轻松购物].[上网本]", "sort": "desc"}];
            var pages:Array = [];
            var measures:Array = [{"uniqueName": "[Measures].[内裤]", "aggregation" : "Sum"}, {"uniqueName": "[Measures].[音箱]", "aggregation" : "Count"}];
            var report:ReportValueObject = new ReportValueObject(rows, columns, pages, measures);
            report.viewType = ViewType.CHARTS;
            report.chartType = ChartType.LINE;
            apiPivot.report = report;
            apiPivot.load();
        } 

        private function getLabels():void {
            var labels:Array = [];
            var strings:Array = [];
            for (var i:int = 0; i < apiPivot.gridRowCount; i++) {
                labels[i] = [];
                for (var j:int = 0; j < apiPivot.gridColumnCount; j++) {
                    var cell:PivotGridCellRenderer = apiPivot.getCell(i,j);
                    labels[i][j] = cell.label;
                }
                strings.push(labels[i].join(", "));
            }
            Alert.show(strings.join("\n"));
        }

        private function clearData():void {
            apiPivot.clear();
        } 

         private function onReady():void {
            this.btnClearData.enabled = true;
            this.btnAddData.enabled = true;
            this.btnAddData1.enabled = true;
            this.addData();
        } 

        private function addPopUp():void {
            var pivot:FlexPivotComponent = new FlexPivotComponent();
            pivot.percentWidth = 100;
            pivot.percentHeight = 100;
            pivot.swfFilePath = this.swfFilePath;
            pivot.configUrl = this.swfFilePath + "simple.xml";

             var window:TitleWindow = new TitleWindow();
            window.title = "Pivot Table"; 
            window.width = 720;
            window.height = 480;
            window.showCloseButton = true;
            window.addEventListener(CloseEvent.CLOSE, function():void {PopUpManager.removePopUp(window)});
            PopUpManager.addPopUp(window, this);
            PopUpManager.centerPopUp(window);

            window.validateNow();
            window.addChild(pivot);
        }

        private function onGridClick(event:Event):void {
            var cell:PivotGridCellRenderer = (event as CellClickEvent).cell;
            var rows:Array = [];
            for (var i:int = 0; i < cell.rows.length; i++) {
                var row:Object = cell.rows[i];
                rows.push(row.hierarchyCaption + "=" + row.caption);
            }
            var rowStr:String = rows.join(", ");

            var columns:Array = [];
            for (i = 0; i < cell.columns.length; i++) {
                var column:Object = cell.columns[i];
                columns.push(column.hierarchyCaption + "=" + column.caption);
            }
            var columnStr:String = columns.join(", ");

            Alert.show("Rows: " + rowStr + "\nColumns: " + columnStr + "\nValue:" + cell.label);
        }

        private function exportRawCSV():void {
            pivot4.export(ExportType.CSV, null, onExportRawCSV);
        }

        private function onExportRawCSV(data:String):void {
            Alert.show(data);
        }

        private function exportFileCSV():void {
            pivot4.export(ExportType.CSV);
        }

    ]]>
</mx:Script>

<mx:Button label="Add Pivot as Popup" click="addPopUp()" horizontalCenter="0" top="4"/>

<mx:Accordion width="100%" height="100%" top="30">
    <mx:Canvas label="Simple Grid" width="100%" height="100%">
        <pivot:FlexPivotComponent width="100%" height="100%" 
              configUrl="{this.swfFilePath}simple.xml" 
              swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="Pivot Chart" width="100%" height="100%">
        <pivot:FlexPivotComponent width="100%" height="100%"
            styleSheetName="styles/skin.css"
            filename="http://www.flexmonster.com/flash/2010-APR-21/data/data.csv"
            rows="[Color].[Color]"
            columns="[Country].[Country], [Business Type].[Business Type]"
            measures="[Measures].[Price], [Measures].[Quantity]"
            viewType="{ViewType.CHARTS}"
            swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="MS OLAP sample" width="100%" height="100%">
        <mx:Button label="Fields List" right="5" top="5" selected="true" click="pivot1.openFieldsList()"/>
        <pivot:FlexPivotComponent id="pivot1" width="100%" height="100%" top="30"
            styleSheetName="styles/skin.css"
            showFieldsList="true"
            proxyUrl="http://olap.flexmonster.com/olap/msmdpump.dll"
            dataSourceInfo="Provider=MSOLAP; Data Source=extranet;"
            catalog="Adventure Works DW Standard Edition"
            cube="Adventure Works"
            rows="[Product].[Product Categories],[Measures]"
            columns="[Product].[Style], [Product].[Color]"
            measures="[Measures].[Reseller Order Quantity], [Measures].[Discount Amount]"
            swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="Mondrian Sample" width="100%" height="100%">
        <mx:Button label="Fields List" right="5" top="5" selected="true" click="pivot2.openFieldsList()"/>
        <pivot:FlexPivotComponent id="pivot2" width="100%" height="100%" top="30"
            styleSheetName="styles/skin.css"
            showFieldsList="true"
            proxyUrl="http://olap.flexmonster.com:8080/mondrian/xmla"
            dataSourceInfo="Provider=Mondrian;DataSource=MondrianFoodMart;"
            catalog="FoodMart"
            cube="Sales"
            rows="{[{uniqueName: '[Education Level]', sort: 'desc'}, {uniqueName: '[Promotion Media]'}]}"
            columns="{[{uniqueName: '[Gender]'}]}"
            measures="{[{uniqueName: '[Measures].[Sales Count]'}, {uniqueName: '[Measures].[Profit]'}]}"
            swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="Switch View" width="100%" height="100%">
        <mx:Button x="10" y="10" label="Grid" icon="@Embed(source='images/Table.png')" width="100" height="80" color="#0000FF" click="pivot3.showGrid()"/>
        <mx:Button x="115" y="10" label="Bar" icon="@Embed(source='images/Bar Chart.png')" width="100" height="80" color="#0000FF" click="pivot3.showCharts(ChartType.BAR)"/>
        <mx:Button x="220" y="10" label="Line" icon="@Embed(source='images/Line Chart.png')" width="100" height="80" color="#0000FF" click="pivot3.showCharts(ChartType.LINE)"/>
        <mx:Button x="325" y="10" label="Pie" icon="@Embed(source='images/Pie Chart.png')" width="100" height="80" color="#0000FF" click="pivot3.showCharts(ChartType.PIE)"/>
        <mx:Button label="Fields List" right="5" top="5" selected="true" click="pivot3.openFieldsList()"/>
        <pivot:FlexPivotComponent id="pivot3" width="100%" height="100%" top="100" x="10" 
            configUrl="{this.swfFilePath}simple.xml"
            swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="Print and Export" width="100%" height="100%">
        <mx:Button x="10" y="10" label="HTML" icon="@Embed(source='images/file_htm.png')" width="100" height="80" color="#0000FF" click="pivot4.export(ExportType.HTML, new ExportOptions('styles/misc/export.html'))"/>
        <mx:Button x="115" y="10" label="Raw CSV" icon="@Embed(source='images/file_csv.png')" width="100" height="80" color="#0000FF" click="exportRawCSV()"/>
        <mx:Button x="220" y="10" label="CSV to file" icon="@Embed(source='images/file_csv.png')" width="100" height="80" color="#0000FF" click="exportFileCSV()"/>
        <mx:Button x="325" y="10" label="Image" icon="@Embed(source='images/file_png.png')" width="100" height="80" color="#0000FF" click="pivot4.export(ExportType.IMAGE)"/>
        <mx:Button x="430" y="10" label="PDF" icon="@Embed(source='images/file_pdf.png')" width="100" height="80" color="#0000FF" click="pivot4.export(ExportType.PDF)"/>
        <mx:Button x="535" y="10" label="Print" icon="@Embed(source='images/printer.png')" width="100" height="80" color="#0000FF" click="pivot4.print()"/>
        <mx:Button x="640" y="10" label="Save Report" icon="@Embed(source='images/file_save.png')" width="130" height="80" color="#0000FF" click="pivot4.saveReport('http://localhost/flex_demos/save.php', 'report.xml', function():void {Alert.show('Report was saved!')})"/>
        <pivot:FlexPivotComponent id="pivot4" width="100%" height="100%" top="100" x="10" 
                                  configUrl="{this.swfFilePath}simple.xml" 
                                  swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
    <mx:Canvas label="Loading data via API" width="100%" height="100%">
        <mx:Button id="btnClearData" label="Clear Data" enabled="false" x="10" y="5" click="clearData()"/>

        <mx:Button id="btnAddData" label="Add Data" enabled="false" x="110" y="5" click="addData()"/>
        <mx:Button id="btnAddData1" label="Add Data 1" enabled="false" x="210" y="5" click="addData1()"/>
        <pivot:FlexPivotComponent 
            id="apiPivot" top="30" bottom="5" left="0" right="0" autoLoad="false"
            styleSheetName="styles/cherry.css" 
            swfFilePath="{this.swfFilePath}"
            pivotCreationComplete="onReady()"
            gridMouseClick="onGridClick(event)"/>
    </mx:Canvas>
    <mx:Canvas label="中文 / Chinese language" width="100%" height="100%">
        <pivot:FlexPivotComponent width="100%" height="100%" 
                                  configUrl="{this.swfFilePath}chinese.xml" 
                                  swfFilePath="{this.swfFilePath}"/>
    </mx:Canvas>
</mx:Accordion>

Answer 4

webpivottable 有一个纯 JavaScript 解决方案。没有flex，没有插件，没有任何后端技术依赖。这是 演示 。