我正在使用 react-native-svg-charts 作为我的反应原生项目,因为它是最受欢迎的项目。但是这个库中的标签彼此重叠,没有指导如何解决这个问题。我使用的是官方条形图示例,但最终结果与图像中显示的不同。
我的代码结果:
import React from 'react'
import { View } from 'react-native'
import { BarChart, Grid } from 'react-native-svg-charts'
import { Text } from 'react-native-svg'
class ChartExample extends PureComponent {
render() {
const data = [ 10, 5, 25, 15, 20 ]
const CUT_OFF = 20
const Label = ({ item: value, x, y, index, bandwidth }) => (
<Text
key={index}
y={value < CUT_OFF ? y(value) - 10 : y(value) + 15}
x={x(index) + (bandwidth / 2)}
fontSize={14}
fill={value > CUT_OFF ? 'white' : 'black'}
alignmentBaseline={'middle'}
textAnchor={'middle'}
>
{value}
</Text>
)
return (
<View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
<BarChart
style={{ flex: 1 }}
data={data}
svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
contentInset={{ top: 10, bottom: 10 }}
spacing={0.2}
gridMin={0}
renderDecorator={Label}
renderGrid={Grid.Horizontal}
/>
</View>
)
}
}
我的依赖包package.json:
"dependencies": {
"d3-array": "^1.2.1",
"d3-interpolate-path": "^2.0.1",
"d3-scale": "^2.0.0",
"d3-shape": "^1.2.0",
"date-fns": "^1.29.0",
"moment": "^2.22.0",
"moment-timezone": "^0.5.14",
"native-base": "^2.3.10",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-dom": "^16.3.1",
"react-moment": "^0.7.0",
"react-native": "0.55.2",
"react-native-camera": "^1.0.2",
"react-native-checkbox": "^2.0.0",
"react-native-easy-grid": "^0.1.17",
"react-native-fetch-blob": "^0.10.8",
"react-native-permissions": "^1.1.1",
"react-native-save-asset-library": "^1.0.5",
"react-native-sqlite-storage": "^3.3.4",
"react-native-svg": "^6.3.1",
"react-native-svg-animations": "^0.1.6",
"react-native-svg-charts": "^4.2.0",
"react-navigation": "^1.5.8",
"util": "*",
"victory-native": "^0.17.4"
}