Реагировать - Rechart - Как заполнить нижнюю часть области в составной диаграмме (Rechart.js)? - PullRequest
Новая
       20

Реагировать - Rechart - Как заполнить нижнюю часть области в составной диаграмме (Rechart.js)?

0 голосов
/ 01 июля 2019

Вот код, который я пробовал: 

            <ResponsiveContainer width="100%" height={500}>
                <ComposedChart
                    // width={500}
                    // height={400}
                    data={data}
                    margin={{
                        top: 20,
                        right: 20,
                        bottom: 20,
                        left: 20,
                    }}>
                    <CartesianGrid stroke="#f5f5f5" />
                    <XAxis axisLine={false} tickLine={false} dataKey="name" />
                    <YAxis
                        tick={{fill: '#4a4a4a', fontFamily: 'Roboto'}}
                        type="number"
                        domain={['dataMin', 'dataMax']}
                        yAxisId="left"
                        tickLine={false}
                        axisLine={false}
                    />
                    <YAxis
                        tick={{fill: '#4a4a4a'}}
                        unit="x"
                        type="number"
                        domain={['dataMin', 'dataMax']}
                        yAxisId="right"
                        orientation="right"
                        tickCount={10}
                        tickLine={false}
                        axisLine={false}
                    />
                    <Tooltip />
                    <Legend verticalAlign="top" align="right" height={40} />
                    <Area yAxisId="left" type="linear" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
                    <Area yAxisId="left" type="linear" dataKey="pv" fill="#413ea0" stroke="#413ea0" />
                    <Line yAxisId="right" dot={false} type="linear" dataKey="uv" stroke="#ff7300" />
                    {/* <Scatter dataKey="cnt" fill="red" /> */}
                </ComposedChart>
            </ResponsiveContainer>

Вот что я получаю

Вопрос в том, как заполнить нижнюю часть графика?Он должен заполнить все под 0 на оси у.Площадь должна пройти до самого дна

1 Ответ

0 голосов
/ 01 июля 2019

При рисовании области на графике вам нужна ссылка.Никто не может знать, где закончится ваш график и, следовательно, где заполнение должно прекратиться.Более того, если вы избавляетесь от привязки по оси 0, вы также избавляетесь от значения диаграммы области.

В настоящее время ваш пример работает так, как задумано (из документов с настройкой для адаптации к вашемуситуация: jsfiddle ).Я не знаю, есть ли способ сделать то, что вы ищете (и, честно говоря, не могу найти вескую причину, почему).Если я что-то упустил, и вы абсолютно хотите это сделать, я думаю, вы могли бы использовать поддельные данные как прямую линию на MIN_VALUE ваших данных и распечатать их также в виде диаграммы Area ... Это должно выглядеть примерно так: jsfiddle

Но это не имеет смысла для меня.Кроме того, вам придется выяснить, как удалить его из легенды.

...