javascript - 使用 react-native-svg-charts 对多个数据进行分组

Question

嗨，我想用 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;

标签： javascriptreact-nativesvgreact-native-svgreact-native-svg-charts

Answer 1

我已经通过转换数据解决了这个问题，所以 bardataY 看起来像这样

  const barDataY = [
    {
      data: badData,
    },
      data: goodData,
    },
      data: etcdata..,
    },
    
    
  ];