flex - Методы создания сводных или табличных отчетов?

Question

Нужны идеи, стратегии, инструменты и т. Д. Для создания отчетов из Flash Builder / Flex 4.

У меня есть гибкое приложение, которое позволяет создавать / читать / обновлять / удалять информацию о клиентах из внутренней базы данных. Он использует веб-сервисы (zend amf -> mongo db или mysql). У меня уже есть данные клиента IN flex через веб-сервис, например, в виде коллекции.

Пользователь запрашивает возможность создания отчета - для отображения списка клиентов в возрасте до определенного возраста в табличной таблице стилей Excel (таблица данных, скорее всего). Он будет отсортирован и подсчитан по демографической категории, такой как «тип страхования». В идеале пользователь хотел бы иметь возможность выбирать типы страхования, разрешенные в отчете (или в таблице данных / сводной таблице).

Я знаю, что одним из вариантов было бы предоставить пользователю серию флажков или список с несколькими вариантами выбора для выбора типов страхования. Затем предоставьте им сетку данных или расширенный компонент сетки данных для отображения «отчета».

Какие еще методы, опции или компоненты доступны / использовались людьми?

Answer 1

Существует чистое решение javascript на webpivottable .Нет гибкости, нет плагинов, нет никакой зависимости от технологии.Вот демо .

Answer 2

Я думал, что опубликую это как ответ, и, надеюсь, люди могут предложить дополнительные решения:

Решения по отчетности, которые я нашел до сих пор:

• Компонент OLAP Data Grid (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, но сгенерированные приложения flex на основе кода Java

• Коммерческие варианты - я видел несколько различных коммерческих вариантов для компонентов сетки данных с возможностью поворота, но я надеюсь на бесплатное или встроенное решение Чтобы упомянуть их,

  • 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

Вы не сможете избежать того факта, что вам придется выполнять какую-то работу самостоятельно.Ваше решение будет слишком индивидуальным для коммерческих опций, поскольку только вы знаете, какие данные должны отображаться.

Вам нужно создать какой-то интерфейс, который пользователь мог бы сказать, что он хочет в отчете, а Flex запрашиваетуслуги, получает данные, необходимые для отображения, и знает, как правильно их отображать.Вы должны выяснить каждую часть, чтобы это работало.