Прямоугольник, созданный элементом управления фильтра диапазона диаграммы, намного больше, чем элемент управления - PullRequest
0 голосов
/ 21 декабря 2018

Я использую диаграммы Google React.Я создал линейный график и хотел поставить под него элемент управления, чтобы масштабировать и панорамировать график.

Я установил height из chartArea как 25% графика, который равен 300px.

Однако, элемент управления создает вокруг него большой белый прямоугольник, который имеет высоту 200px, поэтомуон слишком велик по сравнению с высотой органов управления.

Я хотел бы знать, как я мог бы это исправить, пожалуйста.Я попытался поставить настройку 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>
);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...