victory-native 的图表使用

  1. android 下面遇到bug,饼图的项点击事件不响应。
    具体可见https://github.com/FormidableLabs/victory-native/issues/96
    的解决方案。原先的代码,在ios下可正常工作。
    原先代码如下:
    // events={[
    // {
    // target: 'data',
    // eventHandlers: {
    // onClick: this.onSliceClick
    // }
    // }
    // ]}
    events={[
    {
    target: 'data',
    eventHandlers: {
    onPress: () => {
    alert('onclick')
    }
    }
    }
    ]}
    style={{
    labels: {
    fill: 'white',
    stroke: 'none',
    fontSize: 15,
    fontWeight: 'bold'
    }
    }}
    data={[
    { x: '<5', y: 6279 },
    { x: '5-13', y: 9182 },
    { x: '14-17', y: 5511 },
    { x: '18-24', y: 7164 },
    { x: '25-44', y: 6716 },
    { x: '45-64', y: 4263 },
    { x: '≥65', y: 7502 }
    ]}
    innerRadius={70}
    labelRadius={100}
    colorScale={[
    '#D85F49',
    '#F66D3B',
    '#D92E1D',
    '#D73C4C',
    '#FFAF59',
    '#E28300',
    '#F6A57F'
    ]}
    />
    解决后代码如下:
    在原有的VictoryPie外层包一层Svg标签即可解决,后可响应点击事件了。
    import Svg from 'react-native-svg'
    width={400}
    height={400}
    viewBox="0 0 400 400"
    style={{ width: '100%', height: 'auto' }}
      {
               alert('onclick')
             }
           }
         }
       ]}
       style={{
         labels: {
           fill: 'white',
           stroke: 'none',
           fontSize: 15,
           fontWeight: 'bold'
         }
       }}
       data={[
         { x: '<5', y: 6279 },
         { x: '5-13', y: 9182 },
         { x: '14-17', y: 5511 },
         { x: '18-24', y: 7164 },
         { x: '25-44', y: 6716 },
         { x: '45-64', y: 4263 },
         { x: '≥65', y: 7502 }
       ]}
       innerRadius={70}
       labelRadius={100}
       colorScale={[
         '#D85F49',
         '#F66D3B',
         '#D92E1D',
         '#D73C4C',
         '#FFAF59',
         '#E28300',
         '#F6A57F'
       ]}
     />
    
  2. 适配的最终解决方案
    其外层的chart通过props传进来。
    export default class ChartContainter extends React.Component {
    constructor (props) {
    super(props)
    }
    render () {
    if (Platform.OS == 'ios') {
    return (

    {this.props.chart}

    )
    } else if (Platform.OS == 'android') {
    return (
    width={this.props.width}
    height={this.props.height}
    viewBox={'0 0 ' + this.props.width + ' ' + this.props.height}
    style={{ width: '100%', height: 'auto' }}
     {this.props.chart}
    

    )
    }
    }
    }

你可能感兴趣的:(victory-native 的图表使用)