Google Charts表-堆栈列

Question

这是我制作的从Google表格读取的Google图表表格的屏幕截图：

我还将html文档托管在Google Cloud Platform here

上

我希望这些列垂直堆叠，这可能吗？因此，从视觉上讲，只有一列（我将删除选择多个值的选项）。

谢谢

Answer 1

在表格中没有用于堆积列的选项，
但是您可以绘制多个表格图表，每列一个。

请参阅以下工作片段...

google.charts.load('current', {packages: ['controls','corechart','table']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
    var queryString = encodeURIComponent('SELECT A,B,C,D');

    var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheets/d/1J_xPpcXW9SS_u9bxCDwwFtCHpbW8NFX97vaav8YRMQc/gviz/tq?gid=2068570642&headers=1&tq=' + queryString);
    query.send(handleQueryResponse);

}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();

    var cssClassNames = {
        'headerCell': 'headcell'
    };

    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'categorySelector',
        'state': {'selectedValues': ['KwaMashu Cemetery - Queries on Visitor Access']},
        'options': {
            'filterColumnLabel': 'Search Field',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': true,
                'allowMultiple': true,
                'allowNone': true,
                'label': 'Search for an Open Space'
            }
        }
    });

    var tables = [];
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        addTable(i);
    }

    function addTable(index) {
        var table = document.getElementById('tables').appendChild(document.createElement('div'));
        table.id = 'table-' + index;
        tables.push(new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table-' + index,
            'options': {cssClassNames: cssClassNames, allowHTML: true, width: '100%'},
            'view': {
              columns: [index]
            }
        }));
    }

    // Create a dashboard
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard1')
    );
    dashboard.bind(categoryPicker, tables);

    dashboard.draw(data);
}

.goog-menu-vertical {overflow-y:scroll; max-height:200px}

th {
    background-color: #33338b;
    color: white;
}
    .headcell {}

body {
    background: #ffffff;
}

.panel {
    max-width: 100%;
    position: relative;
    margin: 10px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="panel">
    <div id="dashboard1">
        <div id="categorySelector"></div>
        <br>
        <div id="tables"></div>
    </div>
</div>