使用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,

      },

    },

  ];

相反，得到我想要的图表，我的图表看起来像这样

那么我如何按数据集对它们进行分组呢？

Answer 1

我通过转换数据解决了这个问题，所以 bardataY 看起来像这样  const barDataY = [    {      data: badData,    },      data: goodData,    },      data: etcdata..,    },          ];