Ползунок «Диапазон дат» не отображается в реакциях google-charts - PullRequest
Новая
       9

Ползунок «Диапазон дат» не отображается в реакциях google-charts

0 голосов
/ 05 ноября 2018

Скриншот, показывающий визуализированный график: Screenshot showing rendered graph

    <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. Я просто скопировал код из response-google-charts и изменил немного, есть ли что-то еще, что мне нужно включить в код?

1 Ответ

0 голосов
/ 13 ноября 2018

Я попытался воспроизвести проблему, но, как вы можете видеть здесь , она работает нормально.

Существует 2 возможных причины проблемы с IMO:

  1. Вы используете старую версию response-google-charts (<3.0) </li>
  2. Какая-то из ваших страниц CSS переопределяет высоту диаграммы (содержится в div с меньшей высотой, чем диаграмма)?

Надеюсь, это поможет,

Ура!

...