javascript - Recharts 不会自动计算 YAxis 刻度

Question

我正在尝试使用 recharts 添加图表一些货币的最新汇率。数据显示正确，但图表始终从 0 开始并略高于最大值。

图表是正确的，但它不需要从 0 开始，因为这样做，它几乎是一条线。

这是图表的图片:

我想要那个recharts可以自动计算刻度，因此它会从数据的最小值以下一点开始，并在最大值以上一点结束。

这是我的代码:

import React, { useEffect, useState } from "react";
import { StyledCurrencyChart } from "./styles";
import {
    AreaChart,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Area,
    ResponsiveContainer
} from "recharts";
import useExchangeRateProvider from "../../hooks/useExchangeRateProvider";
import api from "../../services/api";
import theme from "../../styles/customMuiTheme";
import moment from "moment";

function Chart({ data }) {
    return (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                width="100%"
                height={250}
                data={data}
                margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
            >
                <defs>
                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop
                            offset="5%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor={theme.palette.secondary.main}
                            stopOpacity={0}
                        />
                    </linearGradient>
                </defs>
                <XAxis
                    dataKey="date"
                    tickFormatter={formatDate}
                    style={{ fill: "#ffffff" }}
                />
                <YAxis tickFormatter={formatRate} style={{ fill: "#ffffff" }} />
                <CartesianGrid
                    strokeDasharray="3 3"
                    fill="rgba(255, 255, 255, 0.3)"
                />
                <Tooltip />
                <Area
                    type="monotone"
                    dataKey="rate"
                    stroke={theme.palette.secondary.main}
                    fillOpacity={1}
                    fill="url(#colorUv)"
                />
            </AreaChart>
        </ResponsiveContainer>
    );
}

// function to format date
function formatDate(tickItem) {
    return moment(tickItem).format("MMM Do YY");
}

// function to format rate
function formatRate(tickItem) {
    return parseFloat(tickItem).toLocaleString("en-US");
}

export default function CurrencyChart() {
    // selected country
    const exchangeRateProvider = useExchangeRateProvider();
    const country = exchangeRateProvider.state.exchangeRateProvider.country;

    // state
    const [values, setValues] = useState({
        loading: true,
        error: false,
        data: {}
    });

    // update chart on country change
    useEffect(() => {
        async function updateChart() {
            try {
                const { data } = await api.get(
                    `/public/rates/history/${country}`
                );
                setValues({ loading: false, error: false, data });
            } catch (e) {
                setValues({ loading: false, error: true, data: {} });
            }
        }
        updateChart();
    }, [country]);

    return (
        <StyledCurrencyChart>
            <Chart data={values.data} />
        </StyledCurrencyChart>
    );
}

我怎样才能实现它？我试着弄乱 interval和 ticks <YAxis>下的 Prop ，但我无法让它发挥作用。

提前致谢

Answer 1

使用 yAxis domain 属性:

<YAxis type="number" domain={[0, 1000]}/> // set to whatever you want [yMix, yMax]