Google可视化ControlWrapper高度

Question

我正在使用 Google 可视化来绘制两张图表，一张包含中心信息，另一张用作概览。 ControlWrapper用于控制主图表中的范围。

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>

大家可以看到上图中控件下方有一个巨大的白色space。 space 将是控件的默认高度，设置 options.ui.chartOptions.chartArea.height 似乎会缩小图表而不是区域。

检查 HTML，我发现该工具正在内联注入此样式，并将其高度设置为 200px。

我认为使用 CSS 来改变它是合理的，但由于我不是管理这些元素的人，我也认为它会破坏某些东西，或者并不总是有效。

正确设置高度的正确方法是什么？

Answer 1

chartArea是绘制区域线的内部，
对于整体高度，使用 --> options.ui.chartOptions.height

Google可视化ControlWrapper高度

Google Visualization ControlWrapper height

charts

google-visualization