可以通过在组件中设置xAxisProps和yAxisProps来更改x和y轴标签。
例如:
import React from 'react'; import { View } from 'react-native'; import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';
class Chart extends React.PureComponent {
render() {
const data = [ 10, 15, 25, 20, 35, 25, 40, 50, 30, 45 ]
const xAxisLabels = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct' ]
const yAxisLabels = [ '$0', '$50', '$100', '$150', '$200' ]
const axesSvg = { fontSize: 12, fill: 'grey' };
const verticalContentInset = { top: 10, bottom: 10 };
const xAxisHeight = 30;
return (
`$${value}`}
{...this.props.yAxisProps}
/>
xAxisLabels[index]}
style={{ marginHorizontal: -10, height: xAxisHeight }}
contentInset={{ left: 10, right: 10 }}
svg={axesSvg}
{...this.props.xAxisProps}
/>
)
}
}
然后在调用图表时,可以传递xAxisProps和yAxisProps来设置标签。
例如:
这将设置x轴上的标签样式和y轴上的标签样式。