在 react rechart 中调整大小后 xAxis 隐藏
xAxis hides after resize in react rechart
我使用 React Rechart 库来创建折线图。当我调整浏览器大小时 window,xAxis 中的值或刻度被隐藏。但我不想隐藏 xAxis 中的值。请提供一个解决方案,以避免 xAxis 中的值被隐藏。
我的折线图组件代码
import React from 'react'
import {
LineChart, Line, XAxis, YAxis, ResponsiveContainer, CartesianGrid, Tooltip, Legend, ReferenceLine,
} from 'recharts';
import { lineChartXAxis, lineChartYAxis } from './chart.config';
// styles
import useStyles from "./styles";
const LineCharts = ({ dimensions, data, XAxisDataKey }) => {
const {chartOuterWrap, chartInnerWrap} = useStyles()
return (
<div className={chartOuterWrap} style={dimensions}>
<div className={chartInnerWrap}>
<ResponsiveContainer>
<LineChart height={'100%'} width={'100%'} data={data}>
<XAxis dataKey={XAxisDataKey}
tick={true}
interval={'preserveStartEnd'}
{...lineChartXAxis}
/>
<YAxis
interval={0}
tick={true}
{...lineChartYAxis}
/>
<Tooltip />
<Line type="monotone" strokeWidth={3} dataKey="uv" stroke="#24b32a" />
<Line type="monotone" strokeWidth={3} dataKey="pv" stroke="#fb8c00" />
<Line type="monotone" strokeWidth={3} dataKey="amt" stroke="#e53935" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
export default LineCharts;
为了便于理解问题,我还附上了图片
调整大小后 window
这是一个带有 Recharts 的 known bug,解决方法是使用自定义刻度线:
const CustomizedAxisTick = props => {
const { x, y, payload } = props
return (
<g transform={\`translate(${x},${y})\`}>
<text dy={16} textAnchor='middle' fill='#666'>{payload.value}</text>
</g>
)
}
然后在图表类型 AreaChart、BarChart、LineChart、ComposedChart 或 ScatterChart 中,在 XAxis
中包含 tick
属性
<XAxis tick={<CustomizedAxisTick />} />
像这样CustomizedLabelLineChart example. Experiment with settings in this codesandbox.
我使用 React Rechart 库来创建折线图。当我调整浏览器大小时 window,xAxis 中的值或刻度被隐藏。但我不想隐藏 xAxis 中的值。请提供一个解决方案,以避免 xAxis 中的值被隐藏。
我的折线图组件代码
import React from 'react'
import {
LineChart, Line, XAxis, YAxis, ResponsiveContainer, CartesianGrid, Tooltip, Legend, ReferenceLine,
} from 'recharts';
import { lineChartXAxis, lineChartYAxis } from './chart.config';
// styles
import useStyles from "./styles";
const LineCharts = ({ dimensions, data, XAxisDataKey }) => {
const {chartOuterWrap, chartInnerWrap} = useStyles()
return (
<div className={chartOuterWrap} style={dimensions}>
<div className={chartInnerWrap}>
<ResponsiveContainer>
<LineChart height={'100%'} width={'100%'} data={data}>
<XAxis dataKey={XAxisDataKey}
tick={true}
interval={'preserveStartEnd'}
{...lineChartXAxis}
/>
<YAxis
interval={0}
tick={true}
{...lineChartYAxis}
/>
<Tooltip />
<Line type="monotone" strokeWidth={3} dataKey="uv" stroke="#24b32a" />
<Line type="monotone" strokeWidth={3} dataKey="pv" stroke="#fb8c00" />
<Line type="monotone" strokeWidth={3} dataKey="amt" stroke="#e53935" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
export default LineCharts;
为了便于理解问题,我还附上了图片
调整大小后 window
这是一个带有 Recharts 的 known bug,解决方法是使用自定义刻度线:
const CustomizedAxisTick = props => {
const { x, y, payload } = props
return (
<g transform={\`translate(${x},${y})\`}>
<text dy={16} textAnchor='middle' fill='#666'>{payload.value}</text>
</g>
)
}
然后在图表类型 AreaChart、BarChart、LineChart、ComposedChart 或 ScatterChart 中,在 XAxis
中包含tick
属性
<XAxis tick={<CustomizedAxisTick />} />
像这样CustomizedLabelLineChart example. Experiment with settings in this codesandbox.