Я использую диаграммы 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>
);
}