React 与 apache 超集的集成以显示图表答案

【问题标题】：React integration with apache superset for showing chartsReact 与 apache 超集的集成以显示图表
【发布时间】：2021-11-16 18:48:58
【问题描述】：

我想在我的 react 应用程序中集成超集图表。我想在服务器上运行我的 UI(react) 并将其连接到超集服务器以查看图表。

我采取的步骤：

已导入@superset-ui/core 包。

我的代码：

import { SupersetClient } from '@superset-ui/core';
import { ChartDataProvider, QueryFormData, SuperChart } from '@superset-ui/core';
import TableChartPlugin from '@superset-ui/plugin-chart-table';

const client = SupersetClient.configure({
  credentials: 'include',
  host: 'localhost:8088',
  protocol: 'http:',
  mode: 'cors',
});
client.init();
new TableChartPlugin().configure({ key: 'table' }).register();
function App() {
  const formData = {
    datasource: '3__table',
    viz_type: 'table',
    url_params: {},
    time_range_endpoints: ['inclusive', 'exclusive'],
    granularity_sqla: 'ds',
    time_grain_sqla: 'P1D',
    time_range: '100 years ago : now',
    query_mode: 'aggregate',
    groupby: ['gender'],
    metrics: ['count'],
    all_columns: ['name', 'gender'],
    percent_metrics: [],
    order_by_cols: [],
    row_limit: 50000,
    order_desc: true,
    adhoc_filters: [],
    table_timestamp_format: 'smart_date',
    color_pn: true,
    show_cell_bars: true,
    queryFields: {
      groupby: 'groupby',
      metrics: 'metrics'
    },
    applied_time_extras: {},
    where: '',
    having: '',
    having_filters: [],
    filters: []
  };
  return (
    <div className="App">
     
        
<ChartDataProvider client={client} formData={formData}>
    {({ loading, error, payload }) => {
      if (loading) return <div>Loading...</div>;
      if (error) return renderError(error);
      if (payload) {
        console.log('payload', payload);
        return (
          <SuperChart
            chartType="table"
            formData={formData}
            queryData={payload.queryData}
            width={400}
            height={200}
          />
        );
      }
      return null;
    }}
    </ChartDataProvider>
     
    </div>
  );
}

export default App;

运行应用程序时出错：

https://i.stack.imgur.com/Ge2P1.png

我已经安装了：“@emotion/react

【问题讨论】：

标签： javascript reactjs charts apache-superset

【解决方案1】：

运行以下命令：

npm i @emotion/styled

(安装此节点包后，可能会遇到其他节点依赖的错误，请全部使用npm i安装)

【讨论】：