javascript - 如何将数据透视表转换为 DataTable Google 可视化

Question

感谢 asgalant，我找到了一种在这里旋转 3 列表格的方法

现在我想使用类别过滤器来选择一些列并显示所选列的折线图。

我使用透视图从电子表格中加载数据。

这是我的示例，本质上我认为我需要将 pivotedData 重新放入一个新的 DataView od DataTable 中。

有人可以帮助我吗？

亲切的问候家伙

 google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
    ///// getting the data ////////
   var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XGqGIs36krgKbRjufKJJNRdu1NUBZlgIJek2ojnOo2Y/edit#gid=967698286');

    // Apply query language statement.
    query.setQuery('SELECT A,B,C  ORDER BY C');

    // Send the query with a callback function.
    query.send(handleQueryResponse);


}

///// ----------------------- //////

function handleQueryResponse(response) {
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();


    //    var table1 = new google.visualization.Table(document.getElementById('table1'));
    //    table1.draw(data, {});

    /* pivot the data table
     * set column A as the first column in the view, 
     * then we have to separate out the C values into their own columns
     * according to the value of B, using a DataView with calculated columns
     */

    // get all the values in column B
    // this sorts the values in lexicographic order, so if you need a different order you have to build the array appropriately
    var distinctValues = data.getDistinctValues(1);

    var viewColumns = [0];
    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 values of C only for the rows where B = distinctValues[i] (passed into the closure via x)
                    return (dt.getValue(row, 1) == x) ? dt.getValue(row, 2) : null;
                }
            })(distinctValues[i])
        });
        groupColumns.push({
            column: i + 1,
            type: 'number',
            label: distinctValues[i],
            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], groupColumns);

    var table2 = new google.visualization.Table(document.getElementById('table2'));
    table2.draw(pivotedData, {});

    var Linechart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'linechart_div',
        view: {
            'columns': [0, 1, 2, 3, 4]
        },
        options: {
            height: 400,
            // omit width, since we set this in CSS
            chartArea: {
                width: '75%' // this should be the same as the ChartRangeFilter
            }
        }
    });

    var RangeFiltercontrol = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'ChartRangecontrol_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    // omit width, since we set this in CSS
                    chartArea: {
                        width: '75%' // this should be the same as the ChartRangeFilter
                    }
                }
            }
        }
    });

    var annotationchart = new google.visualization.AnnotationChart(document.getElementById('annotationchart_div'));

    var options = {
        displayAnnotations: false
    };

    annotationchart.draw(pivotedData, options);


var LineChartView = new google.visualization.DataView(pivotedData);
LineChartView.setColumns([0, 1, 2, 3, 4]);
//dataView.hideColumns(3);
// dataView.toDataTable(myView)
var dashboard = new google.visualization.Dashboard(document.querySelector('dashboard_div'));
dashboard.bind([RangeFiltercontrol], [Linechart]);
dashboard.draw(LineChartView);


function zoomLastDay() {
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
            end: range.max
        }
    });
    control.draw();
}

function zoomLastWeek() {
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
            end: range.max
        }
    });
    control.draw();
}

function zoomLastMonth() {
    // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
    // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
    // you can tweak this to make it function differently if you want
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
            end: range.max
        }
    });
    control.draw();
}

var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
    google.visualization.events.removeListener(runOnce);

    if (document.addEventListener) {
        document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
        document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
        document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
    } else if (document.attachEvent) {
        document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
        document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
        document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
    } else {
        document.querySelector('#lastDay').onclick = zoomLastDay;
        document.querySelector('#lastWeek').onclick = zoomLastWeek;
        document.querySelector('#lastMonth').onclick = zoomLastMonth;
    }
});
 }