charts - 谷歌可视化 ControlWrapper 高度

问题描述

我正在使用 Google Visualization 绘制两个图表，一个包含中心信息，另一个用作概览。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>

您可以在上图中看到控件下方有一个巨大的空白。该空间将是控件的默认高度，并且设置options.ui.chartOptions.chartArea.height似乎缩小了图表而不是区域。

检查 HTML，我看到该工具正在内联注入这种样式，并将其高度设置为200px.

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

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

标签： chartsgoogle-visualization

charts - 谷歌可视化 ControlWrapper 高度

问题描述

解决方案

推荐阅读