Megpróbálok egy színátmenetet hozzáadni a területdiagramomhoz a következő példában szereplő react-native-svg-charts használatával: https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-chart/with-gradient.js.
A kód összeáll, de futás közben a következő hibát kapom:
https://imgur.com/nasKm9x (sajnálom, hogy nem vagyok elég) jó hírneve ahhoz, hogy még képet tegyen közzé )
Az Expo-t használom az Android telefonomon. Meglehetősen kezdő vagyok a programozásban, így nem tudom mit próbáljak ki.
import * as shape from 'd3-shape'
import { View } from 'native-base';
import * as React from 'react';
import { AreaChart, Defs, LinearGradient, Path, Stop } from 'react-native-svg-charts'
// import styles from './styles';
class DashboardChart extends React.Component {
render() {
const data = [ 50, 10, 40, 95, 14, 24, 85, 91, 35, 53, 53, 24, 50, 20, 80 ]
const ChartLine = ({line}) => (
<Path
key={'line'}
d={line}
stroke={'rgb(134, 65, 244)'}
fill={'none'}
/>
)
const Gradient = ({ index }) => (
<Defs key={index}>
<LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
<Stop offset={'0%'} stopColor="blue" stopOpacity={1}/>
<Stop offset={'100%'} stopColor="white" stopOpacity={1}/>
</LinearGradient>
</Defs>
)
return (
<View>
<AreaChart
style={{ height: 200 }}
data={data}
contentInset={{ top: 40, bottom: 10 }}
curve={shape.curveNatural}
svg={{
fill: 'url(#gradient)'
}}
>
{/* <Grid/> */}
<Gradient/>
<ChartLine/>
</AreaChart>
</View>
);
}
}
export default DashboardChart;
