javascript - Recharts 不会自动计算 YAxis 刻度
问题描述
我正在尝试使用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>
,但我无法让它工作。
提前致谢
解决方案
使用 yAxisdomain
道具:
<YAxis type="number" domain={[0, 1000]}/> // set to whatever you want [yMix, yMax]
推荐阅读
- java - FXML getLocation() 返回 null 即使我认为我设置正确
- typescript - 在 Vuex 中将 mapGetter 和 mapMutations 与 typescript 一起使用,而无需类样式组件 sintax
- reactjs - 如何在功能组件中定义 .this
- c# - xPath 仅适用于在同一级别找到的多个 div 标记之一
- javascript - 在反应钩子中设置值
- php - 如何在 Emacs 中关闭特定的 php 警告
- python - Python 和 zlib
- python - 通过引用dict传递变量?
- python - 如何用一个单词退出循环
- java - 从索引 i 到 i+3 删除 ArrayList