React Native Chart Label无法正常工作

时间:2018-04-12 09:21:31

标签: javascript reactjs react-native svg

我正在使用 react-native-svg-charts 作为我的反应原生项目,因为它是最受欢迎的项目。但是这个库中的标签彼此重叠,没有指导如何解决这个问题。我使用的是官方条形图示例,但最终结果与图像中显示的不同。

enter image description here

我的代码结果:

enter image description here

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"
  }

0 个答案:

没有答案