Google Visualization ControlWrapper высота - PullRequest
Новая
       53

Google Visualization ControlWrapper высота

1 голос
/ 13 апреля 2020

Я использую Google Visualization для построения двух диаграмм, одна с центральной информацией, а другая - как обзор. ControlWrapper используется для управления диапазоном на главном графике.

enter image description here

function renderChart(data) {

    data = _data_as_array(data['history']);
    data = google.visualization.arrayToDataTable(
        $.merge([['Date', 'Infected', '1st Degree', '2nd Degree']], data),
    );

    var options = {
        hAxis: {textPosition: 'none', gridlines: { color: 'transparent' }, baselineColor: 'transparent'},
        vAxis: {textPosition: 'none', gridlines: { color: 'transparent' }, baselineColor: 'transparent'},
        legend: {position: 'none'},
        backgroundColor: 'transparent',
        series: {
            0: { color: '#6958E5' },
            1: { color: '#747171' },
            2: { color: '#EF8131' }
        },
    };

    var chart = new google.visualization.ChartWrapper({
        chartType: 'AreaChart',
        containerId: 'covidoff-chart',
        options: $.extend({
            chartArea: {
                width: '98%',
                height: '100%'
            }
        }, options)
    });

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'covidoff-chart-control',
        dataTable: data,
        options: {
            filterColumnIndex: 0, // filter on dates
            ui: {
                chartOptions: {
                    chartArea: {
                        width: '98%',
                        height: '20'
                    }
                },
            },
        },
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('covidoff-chart-container'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
}

Это актуально HTML: 

<div id="covidoff-chart-container" class="d-none">
    <div id="covidoff-chart"></div>
    <div id="covidoff-chart-control"></div>
    <div>a</div>
</div>

Вы можете видеть на картинке выше, что под элементом управления есть огромные пробелы. Это пространство было бы высотой по умолчанию для элемента управления, и установка options.ui.chartOptions.chartArea.height, кажется, сжимает диаграмму, но не область.

Осматривая HTML, я вижу, что инструмент внедряет этот стиль встроенным, и придав ему высоту 200px.

enter image description here

Я бы предположил, что разумно использовать CSS, чтобы изменить это, но так как я не тот, кто управляет элементами, я также думая, что это что-то ломает или не всегда работает.

Как правильно установить высоту?

1 Ответ

0 голосов
/ 14 апреля 2020

chartArea для внутренней части, где нарисованы линии площади,
для общей высоты, используйте -> options.ui.chartOptions.height

...