Таблица Google charts - столбцы стека

Question

Вот скриншот созданной мной таблицы Google Charts, которая читает из Google Sheet:

У меня также есть html docна Google Cloud Platform здесь

Я бы хотел, чтобы столбцы располагались вертикально, возможно ли это?Таким образом, визуально будет только один столбец (я уберу опцию выбора нескольких значений).

Спасибо

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>