Как отобразить данные сгруппированы - PullRequest
Новая
       9

Как отобразить данные сгруппированы

0 голосов
/ 07 октября 2019

Я работаю с Recharts, я пытаюсь сделать простой «Линейный график» для платежных операций в течение всего года.

Итак, вот что я сделал до сих пор 

export const BankTransactionsChart: React.FC<Props> = ({ chartHeight = 400 }) => {
    const data = [
        { key: 'Jan', date: '1-Jan-2019', amount: '12' },
        { key: 'Feb', date: '1-Feb-2019', amount: '56' },
        { key: 'Feb', date: '5-Feb-2019', amount: '76' },
        { key: 'Mar', date: '1-Mar-2019', amount: '-112' },
        { key: 'Apr', date: '1-Apr-2019', amount: '-40' },
        { key: 'May', date: '1-May-2019', amount: '30' },
        { key: 'Jun', date: '1-Jun-2019', amount: '50' },
        { key: 'Jul', date: '1-Jul-2019', amount: '60' },
        { key: 'Aug', date: '1-Aug-2019', amount: '70' },
        { key: 'Sep', date: '1-Sep-2019', amount: '50' },
        { key: 'Oct', date: '1-Oct-2019', amount: '20' },
        { key: 'Nov', date: '1-Nov-2019', amount: '10' },
        { key: 'Dec', date: '1-Dec-2019', amount: '0' }
    ];

    const customizeTick = (props: any) => {
        const { x, y, payload } = props;
        return (
            <text x={x - 10} y={y + 15} textAnchor="start" fill="#666">
                {payload.value}
            </text>
        );
    };
    return (
        <ResponsiveContainer className="bank-transactions-chart-container" width="95%" height={chartHeight}>
            <LineChart className="bank-transactions-chart" data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <XAxis dataKey="date" allowDataOverflow tick={(props: any) => customizeTick(props)} />
                <YAxis />
                <CartesianGrid strokeDasharray="3 3" />
                <Tooltip />
                <Legend verticalAlign="top" height={36} />
                <Line type="monotone" dataKey="amount" stroke="#82ca9d" name="Amount" />
            </LineChart>
        </ResponsiveContainer>
    );
};

Это выводит изображение ниже, Graph output

, если вы можете видеть в массиве данных в коде у меня две транзакции за февраль, но на графике выше в xось показывает только метку для 5 февраля 2019 года.

Я пытаюсь поместить 12 месяцев независимо от даты в массиве данных и отображать точки в соответствии с их соответствующими месяцами.

Это в функции галочки?

Пожалуйста, помогите мне, спасибо заранее.

1 Ответ

0 голосов
/ 06 ноября 2019

Это принципиально странный вопрос. линия является линией, потому что она имеет ТОЛЬКО ОДНУ y-точку (значение) для каждой данной x-точки (значения).

Я предполагаю, что это может решить эту проблему, если вы построите две линии, перекрывающие друг друга, где есть толькоодно (одно и то же) значение доступно и будет показывать «разветвление», где оно имеет два разных значения.

изменить данные следующим образом: 

const data = [
        { key: 'Jan', date: '1-Jan-2019', amount1: '12' amount2: '12' },
        { key: 'Feb', date: '1-Feb-2019', amount1: '56' amount2: '76' },
        { key: 'Mar', date: '1-Mar-2019', amount1: '-112' amount2: '-112' },
        ...
    ];

и построить две серии линий: 

      ...
      <Tooltip />
      <Legend verticalAlign="top" height={36} />
      <Line type="monotone" dataKey="amount1" stroke="#82ca9d" name="Amount" />
      <Line type="monotone" dataKey="amount2" stroke="#82ca9d" name="Amount" />
    </LineChart>
...
...