在react-webdatarocks中捕获数据透视表更新

Question

我正在尝试将 webdatarocks 集成到我的 React 项目中。我按照官方文档中提供的教程进行操作。到目前为止，我可以加载我想要的报告并向我的反应组件显示数据透视表。我无法实现的是捕获用户在表上所做的更改。我正在尝试使用 getData() 函数，但出现错误。

import React from "react";

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
//import "webdatarocks/webdatarocks.highcharts";

export class App extends React.Component {
  myRef = null;

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  jsonData = [
    { Country: "United States", Population: 331002651 },
    { Country: "China", Population: 1444216107 },
    { Country: "India", Population: 1380004385 },
    { Country: "Indonesia", Population: 273523615 },
    { Country: "Pakistan", Population: 220892340 },
    { Country: "Brazil", Population: 212559417 },
    { Country: "Nigeria", Population: 206139589 },
    { Country: "Bangladesh", Population: 164689383 },
    { Country: "Russia", Population: 145934462 },
    { Country: "Mexico", Population: 128932753 },
    { Country: "Japan", Population: 126476461 },
    { Country: "Ethiopia", Population: 114963588 },
    { Country: "Philippines", Population: 109581078 },
    { Country: "Egypt", Population: 102334404 },
    { Country: "Vietnam", Population: 97338579 },
  ];

  myCustomReport = {
    dataSource: { data: this.jsonData },
    slice: {
      rows: [
        {
          uniqueName: "Country", // Field containing country names
        },
      ],
      columns: [
        {
          uniqueName: "Measures", // Placeholder for measures (e.g., population)
        },
      ],
      measures: [
        {
          uniqueName: "Population", // Field containing population data
          aggregation: "sum", // You can change the aggregation type as needed
        },
      ],
    },
  };

  reportComplete = () => {
    console.log(">>>>>", this.myRef.webdatarocks.getData());
    console.log(">>>>>", this.myRef.webdatarocks.getReport().dataSource);
  };

  render() {
    return (
      <div>
        <WebDataRocksReact.Pivot
          ref={(elem) => {
            this.myRef = elem;
          }}
          toolbar={true}
          report={this.myCustomReport}
          // reportcomplete={() => {
          //   this.reportComplete();
          // }}
          reportchange={() => {
            this.reportComplete();
          }}
        />
      </div>
    );
  }
}

export default App;

我得到的错误。

index.js:1 Uncaught TypeError: s is not a function
    at s.getData (index.js:1:1)
    at e.getData (index.js:1:1)
    at e.getData (index.js:1:1)
    at App.reportComplete (App.js:55:1)
    at reportchange (App.js:72:1)
    at index.js:1:1

Answer 1

出现此错误是由于

getData

API 调用使用不正确。应将以下参数传递到此方法中：

• options

  - 用于预处理的数据切片；如果没有定义， 当前数据透视表数据已发送

• callbackHandler

  和

  updateHandler

  - 当 数据分别首先加载和更新，两者都接受一个 参数 -

  rawData

  （发送到图表的非聚合数据）。

这是每次更新后打印数据的代码片段：

this.myRef.webdatarocks.getData({}, (data) => {console.log(data)}, (data) => {console.log(data)}));