Recharts 如何显示分组数据答案

【问题标题】：Recharts How To Show Data GroupedRecharts 如何显示分组数据
【发布时间】：2019-10-07 12:03:32
【问题描述】：

我正在使用 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>
    );
};

这会输出下面的图像，

如果您可以在代码中的数据数组中看到我在 2 月份有两笔交易，但在上面的 x 轴图表中，它仅显示 2019 年 2 月 5 日的标签。

我试图将 12 个月放在数据数组中，而不考虑日期，并根据相应的月份渲染点。

在tick函数中吗？

请帮帮我，提前致谢。

【问题讨论】：

标签： reactjs typescript recharts

【解决方案1】：

这是一个很奇怪的问题。一条线就是一条线，因为它对于每个给定的 x 点（值）只有一个 y 点（值）。

我认为，如果您在只有一个（相同）值可用的情况下绘制 2 条相互重叠的线，并且会在具有两个不同值的情况下显示“分叉”，我认为它可能会解决此问题。

像这样改变数据：

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>
...

【讨论】：