Question

显示渲染图的屏幕截图：

    <Chart
            width={'100%'}
            height={'600px'}
            chartType="LineChart"
            loader={<div>Loading Chart</div>}
            data={[
                ['Date', 'Value'],
                [new Date(1996, 1, 1), 2000 * Math.random()],
                [new Date(1997, 1, 1), 2000 * Math.random()],
                [new Date(1998, 1, 1), 2000 * Math.random()],
                [new Date(1999, 1, 1), 2000 * Math.random()],
                [new Date(2000, 1, 1), 2000 * Math.random()],
                [new Date(2001, 1, 1), 2000 * Math.random()],
                [new Date(2002, 1, 1), 2000 * Math.random()],
                [new Date(2003, 1, 1), 2000 * Math.random()],
                [new Date(2004, 1, 1), 2000 * Math.random()],
                [new Date(2005, 1, 1), 2000 * Math.random()],
                [new Date(2006, 1, 1), 2000 * Math.random()],
                [new Date(2007, 1, 1), 2000 * Math.random()],
                [new Date(2008, 1, 1), 2000 * Math.random()],
                [new Date(2009, 1, 1), 2000 * Math.random()],
            ]}
            options={{
                // Use the same chart area width as the control for axis alignment.
                chartArea: { height: '80%', width: '90%' },
                hAxis: { slantedText: false },
                vAxis: { viewWindow: { min: 0, max: 2000 } },
                legend: { position: 'none' },
            }}
            chartPackages={['corechart', 'controls']}
            controls={[
                {
                    controlType: 'ChartRangeFilter',
                    options: {
                        filterColumnIndex: 0,
                        ui: {
                            chartType: 'LineChart',
                            chartOptions: {
                                chartArea: { width: '90%', height: '50%' },
                                hAxis: { baselineColor: 'none' },
                            },
                        },
                    },
                    controlPosition: 'bottom',
                    controlWrapperParams: {
                        state: {
                            range: { start: new Date(1996, 1, 9), end: new Date(2010, 2, 20) },
                        },
                    },
                },
            ]}
        />

我能够渲染图形，但是看不到日期范围滑块来控制日期范围，有人可以帮忙解决此问题吗？我正在尝试在x轴上显示时间范围，并在y轴上显示一些数字数据。我只是从react-google-charts复制了代码，并没有做太多修改，我还需要在代码中包含其他内容吗？

Answer 1

我试图重现该问题，但是您可以看到here正常运行。

您遇到IMO的问题有两种可能的原因：

您使用的是旧版本的react-google-charts（<3.0）
您的某些页面css覆盖了图表的高度（包含在高度小于图表的div中）？

希望有帮助，

干杯！

日期范围滑块未在react-google-charts中呈现

1 个答案: