使用 react-native-svg-charts 对多个数据进行分组
Grouping Multiple Data with react-native-svg-charts
你好,我想用 2 个数据集得到这种图表
通过使用 react-native-svg-charts
我的数据是这样的
const data1 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 5},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 15},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 50},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];
我把它们归为一个数据,像这样
const barDataY = [
{
data: data1,
svg: {
stroke: 'red',
strokeWidth: 2,
},
},
{
data: data2,
svg: {
stroke: 'dodgerblue',
strokeWidth: 2,
},
},
{
data: data3,
svg: {
stroke: 'grey',
strokeWidth: 2,
},
},
];
而不是得到我想要的图表,我的图表看起来像这样
那么我如何按数据集对它们进行分组?
下面是我的完整代码
import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import {BarChart, Grid, YAxis, XAxis} from 'react-native-svg-charts';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Colors from './App/Configs/Colors';
const data1 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 5},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 15},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 50},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];
const SummaryBarChart = ({barData, xData, bardata2}) => {
const contentInset = {top: 50, bottom: 20};
let mainData = [{data: bardata2}, {data: barData}];
const barDataY = [
{
data: data1,
svg: {
stroke: 'red',
strokeWidth: 2,
},
},
{
data: data2,
svg: {
stroke: 'dodgerblue',
strokeWidth: 2,
},
},
{
data: data3,
svg: {
stroke: 'grey',
strokeWidth: 2,
},
},
];
return (
<View style={styles.barcharContainer}>
<View style={{width: wp('80%')}}>
<View style={{height: 200, flexDirection: 'row'}}>
<BarChart
contentInset={contentInset}
style={{height: 200, width: wp('80%')}}
data={barDataY}
numberOfTicks={5}
yAccessor={({item}) => {
console.log(item);
return item.value;
}}>
<Grid></Grid>
</BarChart>
</View>
</View>
</View>
);
};
export default SummaryBarChart;
我已经通过转换数据解决了这个问题,因此 bardataY 看起来像这样
const barDataY = [
{
data: badData,
},
data: goodData,
},
data: etcdata..,
},
];
你好,我想用 2 个数据集得到这种图表
通过使用 react-native-svg-charts
我的数据是这样的
const data1 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 5},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 15},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 50},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];
我把它们归为一个数据,像这样
const barDataY = [
{
data: data1,
svg: {
stroke: 'red',
strokeWidth: 2,
},
},
{
data: data2,
svg: {
stroke: 'dodgerblue',
strokeWidth: 2,
},
},
{
data: data3,
svg: {
stroke: 'grey',
strokeWidth: 2,
},
},
];
而不是得到我想要的图表,我的图表看起来像这样
那么我如何按数据集对它们进行分组?
下面是我的完整代码
import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import {BarChart, Grid, YAxis, XAxis} from 'react-native-svg-charts';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Colors from './App/Configs/Colors';
const data1 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 5},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 15},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
{label: 'bad', svg: {fill: '#E55300'}, value: 50},
{label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
{label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
{label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
{label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];
const SummaryBarChart = ({barData, xData, bardata2}) => {
const contentInset = {top: 50, bottom: 20};
let mainData = [{data: bardata2}, {data: barData}];
const barDataY = [
{
data: data1,
svg: {
stroke: 'red',
strokeWidth: 2,
},
},
{
data: data2,
svg: {
stroke: 'dodgerblue',
strokeWidth: 2,
},
},
{
data: data3,
svg: {
stroke: 'grey',
strokeWidth: 2,
},
},
];
return (
<View style={styles.barcharContainer}>
<View style={{width: wp('80%')}}>
<View style={{height: 200, flexDirection: 'row'}}>
<BarChart
contentInset={contentInset}
style={{height: 200, width: wp('80%')}}
data={barDataY}
numberOfTicks={5}
yAccessor={({item}) => {
console.log(item);
return item.value;
}}>
<Grid></Grid>
</BarChart>
</View>
</View>
</View>
);
};
export default SummaryBarChart;
我已经通过转换数据解决了这个问题,因此 bardataY 看起来像这样
const barDataY = [
{
data: badData,
},
data: goodData,
},
data: etcdata..,
},
];