Нахождение подытога и общего итога

Со ссылкой на ответ, данный г-ном Асгалланом на мой предыдущий вопрос здесь, Я расширил свой пример, как в этой скрипте, где я добавил столбец с именем "Всего" и сумму каждого столбцы. Также я добавил кнопку печати,

function printPage(){
    var tableData = '<table border="1" width="100%" cellspacing="0" cellpadding="4px" style="font-family: arial, helvetica; font-size: 10pt; border-spacing: 0;"><tr><td colspan="10">Print Report</td></tr>' +document.getElementsByTagName('table')[0].innerHTML+'<tr style="padding-bottom: 4px; width:100%; font-size: 11pt; font-weight: bold; font-family: arial, helvetica; text-align: right; vertical-align: top;"><td colspan="3">Total:&nbsp;</td><td>'+C100+'</td><td>'+C500+'</td><td>'+C200+'</td><td>'+C600+'</td><td>'+C300+'</td><td>'+C400+'</td><td>'+CTotal+'</td></tr></table>';
    var data = tableData+'<style type="text/css" media="print"> .noprint {visibility: hidden;} </style><br/><button class="noprint" onclick="window.print()" >Print the Report</button><button class="noprint" onclick="window.close();">Close Preview</button><br />';        
    myWindow=window.open('','','width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.write(data);
    myWindow.focus();
};

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

введите здесь описание изображения


person user3102065    schedule 11.01.2014    source источник
comment
К сожалению, таблицы Visualization API не поддерживают атрибуты rowspan и colspan, необходимые для создания этого макета.   -  person asgallant    schedule 13.01.2014
comment
Существуют ли какие-либо способы найти промежуточный итог A и B и его общую сумму без rowspan и colspan, например в этом изображение   -  person user3102065    schedule 17.01.2014
comment
Да, вы можете вставлять в таблицу данных новые строки, содержащие промежуточные итоги A и B и общий итог. См. этот пример: jsfiddle.net/asgallant/DUn6B/9.   -  person asgallant    schedule 17.01.2014
comment
Я обновил наш пример скрипка здесь, где я добавил элемент управления фильтром категории. Если я выберу A, как я могу показать только A с промежуточным итогом и общим итогом. Также как я могу обрабатывать только A и B в фильтре категорий?   -  person user3102065    schedule 18.01.2014
comment
@asgallant - мне удалось получить отчет с фильтром категорий, как я просил в комментарии выше: jsfiddle.net/ DUn6B/11. Спасибо...   -  person user3102065    schedule 21.01.2014
comment
Но общая сумма составляет A Total + B Total значение.   -  person user3102065    schedule 21.01.2014
comment
Вам просто нужно рассчитать общий итог, прежде чем добавлять промежуточные итоги в: jsfiddle.net/asgallant/DUn6B/12.   -  person asgallant    schedule 21.01.2014
comment
Существуют ли какие-либо методы для установки вставленных строк жирным шрифтом? Я пробовал использовать reportview.setProperty и reportview.setCell внутри цикла вот так. Но выхода нет. В любом случае, большое спасибо @asgallant. Пожалуйста, добавьте это как ответ, чтобы я мог его принять.   -  person user3102065    schedule 22.01.2014
comment
Вам нужно установить свойство style или className для ячеек, которые вы хотите выделить жирным шрифтом (в зависимости от того, хотите ли вы использовать встроенные стили или классы CSS). Я сделаю новую скрипку и добавлю это как ответ.   -  person asgallant    schedule 22.01.2014


Ответы (1)


Полный код для ответа на базовый вопрос и комментарии:

function drawTable(response) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Column1');
    data.addColumn('string', 'Column2');
    data.addColumn('number', 'Column3');
    data.addRows([
        ['A', 'foo', 100],
        ['A', 'foo', 200],
        ['A', 'foo', 100],
        ['A', 'foo', 100],
        ['A', 'bar', 200],
        ['A', 'bar', 300],
        ['A', 'baz', 300],
        ['B', 'baz', 200],
        ['B', 'cad', 300],
        ['B', 'cad', 400],
        ['B', 'cad', 100]
    ]);

    //  var distinctValues = data.getDistinctValues(2);
    var distinctValues = [100, 500, 200, 600, 300, 400];

    var viewColumns = [0, 1];
    var groupColumns = [];
    // build column arrays for the view and grouping
    for (var i = 0; i < distinctValues.length; i++) {
        viewColumns.push({
            type: 'number',
            label: distinctValues[i],
            calc: (function (x) {
                return function (dt, row) {
                    return (dt.getValue(row, 2) == x) ? 1 : 0;
                }
            })(distinctValues[i])
        });
        groupColumns.push({
            column: i+2,
            type: 'number',
            //label: distinctValues[i],
            aggregation: google.visualization.data.sum
        });
    }

    //total column
    viewColumns.push({
        type: 'number',
        label: 'Total',
        calc: function (dt, row) {
            return 1;
        }
    });
    groupColumns.push({
        column: distinctValues.length + 2,
        type: 'number',
        aggregation: google.visualization.data.sum
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    // next, we group the view on column A, which gets us the pivoted data
    var pivotedData = google.visualization.data.group(view, [0, 1], groupColumns);

    var control = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control',
        'options': {
            'filterColumnIndex': 0,
            'ui': {
                'labelStacking': 'vertical',
                'caption': 'Select',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table1',
        'options': {
            'width': '100%',
            'showRowNumber' : true
        },
    });

    new google.visualization.Dashboard(document.getElementById('dashboard')).
    bind(control, table).
    // Configure & bind the controls 
    draw(pivotedData);

    google.visualization.events.addListener(table, 'ready', function () {
        var reportview = google.visualization.data.group(table.getDataTable(), [0, 1], groupColumns);
        var subTotals = google.visualization.data.group(reportview, [0], groupColumns);

        var grandTotal = google.visualization.data.group(reportview, [{
            type: 'string',
            column: 0,
            modifier: function (val) {return null;}
        }], groupColumns);

        // add subtotals to pivotedData
        for (var i = reportview.getNumberOfRows() - 1, oldVal, newVal, row, subIndex; i >= 0; i--) {
            newVal = reportview.getValue(i, 0);
            if (oldVal != newVal) {
                oldVal = newVal;
                subIndex = subTotals.getFilteredRows([{column: 0, value: newVal}])[0];
                row = [{v: subTotals.getValue(subIndex, 0) + ' Total', p: {style: 'font-style:bold; font-size:22px;'}}, null];
                for (var j = 1; j < subTotals.getNumberOfColumns(); j++) {
                    row.push({v: subTotals.getValue(subIndex, j), p: {style: 'font-style:bold; font-size:22px;'}});
                }
                reportview.insertRows(i + 1, [row]);
            }
        }

        // add grand total to pivotedData
        var row = [{v: 'Grand Total', p: {style: 'font-style:bold; font-size:22px;'}}, null];
        for (var i = 1; i < grandTotal.getNumberOfColumns(); i++) {
            row.push({v: grandTotal.getValue(0, i), p: {style: 'font-style:bold; font-size:22px;'}});
        }
        reportview.addRow(row);

        var table2 = new google.visualization.Table(document.getElementById('table2'));
        table2.draw(reportview, {'width': '100%', 'showRowNumber' : true, allowHtml: true});
    });
}

jsfiddle: http://jsfiddle.net/asgallant/DUn6B/15/

person asgallant    schedule 22.01.2014
comment
Спасибо. Еще одна маленькая вещь. т.е. как я могу показать только одно значение, если одно и то же значение повторяется? например, в скрипке, как я могу показать только значение A в column1 вместо трех букв A. Я изучаю одну из ваших скрипок здесь: jsfiddle.net/asgallant/qKWZT об этом. - person user3102065; 23.01.2014
comment
Если вы хотите сделать что-то вроде столбца1 на изображении в своем сообщении, это не поддерживается API. Если вы хотите внести грубый хак в свой код, вы можете использовать что-то вроде этого: jsfiddle.net /asgallant/DUn6B/16. Кроме того, я бы порекомендовал отключить сортировку таблиц, так как это испортит строки промежуточных и общих итогов (установите sort: 'disable' в параметрах таблицы). - person asgallant; 23.01.2014