// method that transforms data into a svg path (should be exposed as part of the AreaSpline interface) _createArea() { var that = this; var area = d3.shape.area() .x(function(d, index) { return that._Xvalue(d, index); }) .y1(function(d, index) { return that._Yvalue(d, index); }) .curve(d3.shape.curveNatural) (this.props.data) // console.debug(`area: ${JSON.stringify(area)}`); return { path : area }; }
render() { const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] const Line = ({ line }) => ( <Path key={'line'} d={line} stroke={'rgb(134, 65, 244)'} fill={'none'} /> ) return ( <AreaChart style={{ height: 200 }} data={data} contentInset={{ top: 30, bottom: 30 }} curve={shape.curveNatural} svg={{ fill: 'rgba(134, 65, 244, 0.2)' }} > <Grid/> <Line/> </AreaChart> ) }
render() { const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] const data2 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ].reverse() return ( <View style={ { height: 200 } }> <AreaChart style={ { flex: 1 } } data={ data } svg={{ fill: 'rgba(134, 65, 244, 0.5)' }} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } > <Grid/> </AreaChart> <AreaChart style={ StyleSheet.absoluteFill } data={ data2 } svg={{ fill: 'rgba(34, 128, 176, 0.5)' }} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } /> </View> ) }
keys={ keys } colors={ colors } curve={ shape.curveNatural } />
render() { const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] const Line = ({ line }) => ( <Path key={ 'line ' } d={ line } stroke={ 'rgb(134, 65, 244)' } fill={ 'none' } /> ) return ( <AreaChart style={{ height: 200 }} data={ data } svg={{ fill: 'rgba(134, 65, 244, 0.2)' }} curve={ shape.curveNatural } gridMax={ 500 } gridMin={ -500 } > <Line/> </AreaChart> ) }
keys={ keys } colors={ colors } curve={ shape.curveNatural }