超集UI图表类型不是寄存器

Question

我正在尝试将超集ui集成到Reactjs应用程序。我遵循npm上的文档以及github上的示例，但是当我启动项目时，它显示错误

错误chartType ="pivot-table"-错误:带有"透视表"键的项

我的代码

import { SuperChart } from '@superset-ui/core';
import PivotTableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
new PivotTableChartPlugin().configure({ key: 'pivot-table' }).register();
const PivotTable = () => {
const datasource = {
columnFormats: {},
verboseMap: {
sum__num: 'sum__num',
},
};
return (
<SuperChart
chartType="pivot-table"
width={400}
height={400}
datasource={datasource}
queriesData={[{ /* sample data */ }]}
/>
);
}
export default PivotTable;

有人知道吗?

Answer 1

try

new PivotTableChartPlugin().configure({ key: 'pivot_table' }).register();

不是pivot-table而是pivot_table

Answer 2

我能够通过从他们的开源React Dashboard中获取代码来实现这一点。注意，这适用于超集1.5.0版本，但可能不适用于较新的2.1.0版本

import { Preset } from '@superset-ui/core';
import PivotTableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
class MainPreset extends Preset {
constructor() {
super({
name: 'Legacy Charts',
plugins: [
new PivotTableChartPlugin().configure({ key: 'pivot_table' }),
],
});
}
}
// call setupPlugins() on app load before you try to render the chart
export default function setupPlugins() {
new MainPreset().register();
}

这似乎是一种更复杂的方法来做你已经在做的事情，但值得一试。

如果这仍然不适合你，我的猜测是，注册函数是一个异步的过程，需要时间来执行，如果你试图渲染图表之前完成它会给你这个错误。我还没有找到任何与register函数相关的承诺或回调。

在您尝试渲染图表之前，请尝试执行register函数，看看是否同样有效。