图表范围过滤器控件创建的矩形比控件大

Question

我正在使用React Google图表。我创建了一个折线图，并希望在其下方放置一些控件以缩放和平移该图。

我将height中的chartArea设置为图表的25％，即300px。

但是，该控件在其周围创建了一个大的白色矩形，高度为200像素，因此与控件的高度相比太大了。

我想知道如何解决这个问题。我试图将cssClass设置height=100px放在控件的太多位置，但是没有用。我在html代码的任何地方都看不到该类。谢谢

如您所见，https://imgur.com/a/amidPgu控件下方有一个很大的空白区域

{
return (
  <div className="App">
  <Chart
  width={'100%'}
  height={'300px'}
  chartType="ComboChart"
  loader={<div>Loading Chart</div>}
  data={[["Time","Count", "Accumulate"],...this.props.data.normal]}

  options={{
    title: this.props.title,
    chartArea: { width: '80%'},
    // left:0,top:10
    hAxis: {
        format: 'M/d/yy',
        title: 'Time'
    },
    seriesType: 'bars',
    series: {1: {type: 'line', targetAxisIndex: 1}},
    explorer: { 
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 8.0
    },
    vAxes: { 0: { title: 'Medias', minValue: 0}, 1: {title: 'Accumulate', minValue: 0} }​,
    }}
    controls={[
        {
            controlType: 'ChartRangeFilter',
            options: {
                filterColumnIndex: 0,
                ui: {
                    chartType: 'LineChart',
                    chartOptions: {
                        chartArea: { width: '90%', height: '25%' },
                        hAxis: { baselineColor: 'none' },
                    },
                },
            },
            controlPosition: 'bottom',
            controlWrapperParams: {
                state: {
                    range: { start: new Date(2017, 1, 9), end: new Date(2018, 12, 20) },
                },
            },
        },
    ]}
  rootProps={{ 'data-testid': '1' }}
/>
  </div>
);
}