Superset 二次开发之自定义Viz Plugins(Hello World v2)

aimmon

已于 2025-01-18 13:14:11 修改

阅读量1.6k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： Superset二次开发文章标签： BI superset viz plugins

于 2023-12-26 15:57:26 首次发布

本文链接：https://blog.csdn.net/u013985879/article/details/135223911

Superset二次开发专栏收录该内容

55 篇文章

订阅专栏

本文介绍了如何在Superset中进行二次开发，创建自定义图表插件。通过详细步骤，包括环境配置、Yeoman生成器使用、新图表插件的创建、初始化、构建过程，以及解决在开发过程中遇到的错误，如'BABEL_OUTPUT'命令找不到、browserlist数据库更新和模块未找到问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：

Node.js 16
npm 7 or 8
安装webpack

全局安装 npm install webpack -g

安装eslint

superset-frontend> npm install eslint

1.Yeoman 生成器

全局安装Yo> npm i -g yo

2.进入/superset-frontend/packages/generator-superset目录

npm i && npmlink

3.新建图表插件

superset-frontend目录下，新建文件夹temp ，新建superset-plugin-chart-hello-world

mkdir /superset-frontend/temp/superset-plugin-chart-hello-world

cd /superset-frontend/temp/superset-plugin-chart-hello-world

4.初始化插件

> yo 然后一步一步回车即可，

5.开始build，执行

npm i --force

npm run build

6.向superset添加图表，执行（链接到已创建的图表）

进入根目录/superset-frontend

superset-frontend> npm i -S temp\superset-plugin-chart-hello-world

superset-frontend/src/visualizations/presets/MainPreset.js

import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';
new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),

7.运行

前端

superset-frontend>npm run dev-server

后台

superset> set FLASK_APP=superset

superset> superset init

superset> superset run -p 8088 --with-threads --reload --debugger

效果：

异常信息：

1.Error Current environment doesn't provides some necessary feature this generator needs.

解决方案：

superset-frontend> cnpm install

运行yo 命令显示 Available 说明可以进行下一步操作了

2. 'BABEL_OUTPUT' 不是内部或外部命令，也不是可运行的程序或批处理文件

解决方案:

修改superset-plugin-chart-hello-world/package.json

build-esm 和 dev 分别添加set

3. Please run npx update-browserlist-db@latest

解决方案：

superset-frontend>npx update-browserlist-db@latest

4. Module not found:Error Can't resolve './locale' （此异常或导致无法进入welcome页面）

解决方案：

修改 moment-with-locales.js 文件

aliasedRequire('./locale/' + name); 改为 aliasedRequire('moment/locale/' + name);