React Native 如何从嵌套数据创建 VictoryPie

Question

在我的 React Native 应用程序中，我正在以下列形式从我的商店访问数据：

Array [
  Checkout {
    "date": 2020-12-27T13:24:08.734Z,
    "id": "Sun Dec 27 2020 08:24:08 GMT-0500 (EST)",
    "items": Array [
      Object {
        "productBrand": "Microsoft",
        "productCategory": "Gaming",
        "productId": "p1",
        "productTitle": "Xbox",
        "quantity": 2,
        "x": 1.815,
      },
      Object {
        "productBrand": "Apple",
        "productCategory": "Computers",
        "productId": "p2",
        "productTitle": "MacBook Pro",
        "quantity": 1,
        "x": 1.905,
      },
    ],
    "total": 3.720,
  },
  Checkout {
    "date": 2020-12-27T13:24:47.790Z,
    "id": "Sun Dec 27 2020 08:24:47 GMT-0500 (EST)",
    "items": Array [
      Object {
        "productBrand": "Apple",
        "productCategory": "Computers",
        "productId": "p2",
        "productTitle": "MacBook Pro",
        "quantity": 1,
        "x": 1.905,
      },
    ],
    "total": 1.905,
  },
]

我正在尝试使用 VictoryPie 创建一个饼图，显示 productBrand 由所有对象的 x 的总和加权。在此示例中，我需要一个显示 Microsoft 和 Apple 的饼图，分别按 1.815 和 2*1.905 = 3.81 加权。有没有办法在不编写单独的函数来计算这些总和的情况下做到这一点？我希望饼图在每次向商店添加新数据时自动更新。

我试过了，其中 history 是一个包含上述数组但没有生成饼图的变量。

<VictoryPie data={history} x={(data) => data.items.productBrand} y={(data) => data.items.x} />

Answer 1

See my working sample: https://codesandbox.io/s/react-victory-pie-chart-forked-kpe39?file=/src/index.js

像这样：

        x="productBrand"
        y={(data) => data.x * data.quantity}

Answer 2

对于任何试图做类似事情的人，我最终通过在 useSelector 钩子中使用嵌套 for 循环来提取我需要的数据：

const allBrands = useSelector(state => {
    let allData = {};
    for (const key1 in state.history.history) {
      for (const key2 in state.history.history[key1].items) {
        if (allData.hasOwnProperty(state.history.history[key1].items[key2].productBrand)) {
          allData[state.history.history[key1].items[key2].productBrand] += state.history.history[key1].items[key2].x;
        } else {
          allData[state.history.history[key1].items[key2].productBrand] = state.history.history[key1].items[key2].x;
        }
      }
    };
    let dataArray = [];
    for (const prop in allData) {
      dataArray.push({ brand: prop, total: allData[prop] })
    }
    return dataArray
  });

将 allBrands 传递给 VictoryPie data 属性生成了正确的饼图。

React Native 如何从嵌套数据创建 VictoryPie

React Native how to create a VictoryPie from nested data

javascript

reactjs

react-native

victory-charts