Superset二次开发--添加新图例

最新推荐文章于 2025-03-09 01:41:12 发布
置顶 最新推荐文章于 2025-03-09 01:41:12 发布
阅读量1.1w 收藏 18
点赞数 7
分类专栏： Business Intelligence 文章标签： superset Business Intelligence
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MK_chan/article/details/86532728
版权

superset安装和环境配置网上都有现成的例子，此处就不赘述了。不过还是顺便说下我是git clone的源码安装的。发布的版本是0.28.1 。运行系统为linux，Windows的话有一些坑，github或者别的博客都有说解决方法，我这里也不赘述了。

在二次开发部分，网上并没有太多新的内容。最简单来说，添加新的图。网上给的例子，在当前版本的superset中都已经不支持了，连项目目录结构都变了，根本不能用，除非退回到之前的版本。但是我想大家都不会想用老版本的。就连github上给的例子都是旧的。我在github上提出过希望他们发一个新的教程出来，不过开发者说他们正在开发这样的插件，反正也没更新例子。

废话到此为止，开始。

前置条件

为superset配置echarts。

在superset\superset\assets\packages.json中的“dependencies”中添加"echarts": "^4.2.0-rc.2"。版本号就用自己的echarts版本号。

然后打开命令行终端，在这个assets下执行

$ npm install -d
$ npm run dev

添加一个echarts图例

这里我直接给出添加一个图例需要哪些文件。后面会解释如何修改这些文件。

supserset/viz.py #修改
superset/assets/src/visualizations #添加
superset/static/assets/src/visualizations/presets/LegacyChartPreset.js #修改
\superset\assets\src\explore\controlPanels #添加
superset/assets/src/explore/controlPanels/index.js #修改
\superset\assets\src\explore\controls.jsx #可选项

这里举个非常简单易懂的栗子：添加一个echarts的散点图。 

一、修改viz.py文件

我们先来看一下最终效果页面：

viz.py 这个文件起到一个类似于视图的功能，从前端接受请求后进行一系列处理。我们可以看到，一个图例就是一个类。经过分析已有的这些类，发现这些类大部分是继承了BaseViz这个基类，并且主要重写了query_obj和get_data这两个方法。其中query_obj，顾名思义，是用来构造查询条件的。而查询条件来源于页面左侧的组件，这些组件的信息存储在form_data的一个字典中，query_obj方法中将会处理form_data，构造除自己需要的查询条件并返回࿰

最低0.47元/天 解锁文章
Superset 二次开发之自定义Viz Plugins(Hello World v2)
Aimmon
12-26 1493
4.Modulenotfound:ErrorCan'tresolve'./locale'（此异常或导致无法进入welcome页面）aliasedRequire('./locale/'+name);修改superset-plugin-chart-hello-world/package.json。2.'BABEL_OUTPUT'不是内部或外部命令，也不是可运行的程序或批处理文件。修改moment-with-locales.js文件。全局安装Yo>npmi-gyo。
superset4.0，superset-frontend执行 npm run dev-server 访问 127.0.0.1:9000报错
**My Coding Family**
06-21 817
ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；
【superset二次开发】mac环境搭建教程
最新发布
向往随风而行的自由
03-09 1454
最近接了一个公司做BI报表的需求，公司主要想节约成本，然后不想购买目前商业的BI产品，所以最后选择找人使用开源产品做，那我这边接到项目之后进行了一些列的调研之后，最后选定了使用目前社区活跃度比较高的superset做本次BI的需求，后续可能涉及到二次开发，所以想着把这个相关的过程都记录下来，便于后续学习查找。这个配置是覆盖默认的config.py里面的对应的配置的，需要提前在对应的mysql中创建对应的数据库，如果没有现成的数据库，可以本地安装一个，具体安装教程deepseek一下就行。
Apache Superset 二次开发
热门推荐
05-31 1万+
基本概念 　Superset 是 Airbnb 开源的一个旨在视觉，直观和交互式的数据探索平台（曾用名 Panoramix、Caravel，现已进入 Apache 孵化器） 基础组件 Flask 　Python 几大著名 Web 框架之一，以其轻量级, 高可扩展性而著名 Jinja2 模板引擎 Werkzeug WSGI 工具集 Gunicorn 　Gunico...
superset二次开发及汉化、图标等
qq_34521526的博客
05-12 6710
superset 二次开发 一. 集成echarts图表，二次开发。 superset版本0.36.0，echarts版本4.7.0。 0.36.0版本是比较新的版本，代码结构相比 0.30以前的改动还是比较大的，主要是前端的代码结构变化比较大， superset 把前端的插件单独放在一个superset-ui的项目中；superset中的前端代码主要放在superset-frontend的目录中. 以集成echarts柱状折线图 mix-line-bar为例。 主要修改的地方： 1. superset-.
[Superset] 二次开发 根据APP控制权限
太阳的味道
05-18 977
Superset 二次开发 根据APP控制权限 一、背景 数据是区分应用维度的，想要控制用户对应用数据的访问权限 综上，需要二次开发，实现基于数据内容的权限控制 二、Version 系统：Ubuntu python版本：3.6 superset版本： apache-superset==0.36.0 conda 虚拟环境 三、实现 1. 思路 实现该功能的最终目的就是只返回用户有权限的应用的数据，没有权限的不返回 Google之后没有发现superset支持类似的功能，或者说在superset的设计
superset dashboard中嵌入图片
qq_40386964的博客
01-30 768
第一种：新建一个dashbroad，点击edit dashboard，选择Text控件拖到dashboard里，和markdown一样。需要图片有一个http链接，双击text控件开始编辑，有两种html可以实现。[{{Image Name}}]({{Image URL}})输入后需要等待几秒，加载出来就成功了。
superset二次开发数据字典
07-05
在对Apache Superset进行二次开发时，理解其架构中的数据表关系至关重要。Superset是一个开源的数据可视化和数据探索平台，它允许用户创建仪表板和图表来展示数据。二次开发通常涉及修改和扩展Superset的功能，这...
SuperSet二次开发本地调试环境搭建Windows版本---干货
扫地小僧Tommy
07-22 2742
SuperSet二次开发本地调试环境搭建Windows版本—干货 @Copyright By 扫地小僧 @author_YoungSweepingmOnK 1.搭建本地基础环境 1. 本机安装Python3.7.3，官方文档要求3.6以上，版本确定影响后续第三方包版本控制,pycharm会自动打包第三包(pycharm安装第三方包时可能会报geohash的错误,需要安装Microsoft VC++...
【BI看板】Superset时间过滤控件二次开发
wenchun001的博客
09-04 1862
有没有人发觉Superset时间过滤组件非常高级，😟但又有点复杂，没有选择时间区间的快捷方式。Superset时间过滤控件二次开发
如何将Superset图表嵌入html
11-22
superset配置图表免登陆访问，之后可将图表嵌入到html系统中
Superset二次开发之Superset 4.0 介绍
Aimmon
04-09 2209
and4.0.0为Superset带来了许多令人兴奋的变化。我们已经引入了几个突破性的变化，以改善我们代码库的整体架构和可扩展性。这些更改可能需要一些代码更新，但它们旨在增强长期的性能和可维护性。我们还将各种依赖项升级到最新版本，并弃用了某些不再符合我们长期路线图的功能。我们鼓励所有开发人员仔细查看和文件，并相应地更新他们的代码。虽然我们主要关注的是代码清理，但此版本还包含令人兴奋的新功能，并标志着该项目的重要里程碑。以下是此次发布的一些亮点。
Superset源码安装启动二次开发
hz1988a的专栏
04-19 880
2.创建superset_config.py文件放在根目录下面。如果前端页面二开了，需要先build。
Superset二次开发之环境部署（Docker版）
Aimmon
12-30 2105
docker exec -it 容器ID /bin/bash。下载的superset，根目录重命名src。│ ├── . . .(省略)│ ├── . . .(省略)
Apache Superset二次开发环境，windows环境下踩坑记录(ModuleNotFoundError: No module named ‘typing‘)
qq_42354307的博客
05-18 895
windows环境，初次接触Superset与Python踩坑
Superset 二次开发之Superset技术栈分析
Aimmon
11-22 1477
Apache Superset 是一个功能强大的开源数据可视化平台，支持交互式仪表板和数据探索。它的灵活性来源于其现代化的技术栈架构。本文将详细分析 Superset 的技术栈，从前端到后端及数据层，帮助开发者理解其核心组件和使用场景。
superset 二次开发环境搭建
StarMyLife的博客
11-14 6015
1、新建虚拟环境 virtualenv superset --python=python3.6 2、拉取项目代码 git clone https://gitee.com/kk25114/incubator-superset.git 3、激活虚拟环境，安装相关依赖 activate cd incubator-superset pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple pip insta
Superset二次开发之调研篇 v3.0 VS v4.0
Aimmon
06-14 1429
这不仅解决了许多安全问题，减少了漏洞，还显著增强了系统的稳定性和安全性。同时，废弃了旧的可视化图表和许多不再使用的功能，也引入了众多新的用户体验和改进之处。关注版本变化，有助于改进我们的二次开发策略和版本升级方案。3.1：90个漏洞（42个中度，34个高度，14个严重）4.0：25个漏洞（16个中度，8个高度，1个严重）重新设计了警报和报告模态框，提高了用户体验；删除了过滤框组件，推荐使用仪表板本地过滤器。进一步清理代码库，移除了大量未使用的代码；进一步移除了旧版图表，完成了迁移；提供了更直观的拖放体验，
Superset二次开发 Cross-filtering
12-28
### Superset 中实现 Cross-filtering 功能的二次开发 在 Apache Superset 中，通过自定义 JavaScript 和 Python 后端逻辑可以实现跨过滤（Cross-filtering）功能。此过程涉及前端和后端两部分的工作。 #### 前端修改 为了实现在不同图表之间共享筛选条件的功能，在前端需要监听特定事件并传播这些事件到其他组件。这通常涉及到对现有 React 组件树中的 `FilterBox` 或者任何用于输入筛选器值的小部件进行扩展[^1]： ```javascript // src/explore/components/controls/FiltersControl.jsx import React from 'react'; import PropTypes from 'prop-types'; class FiltersControl extends React.PureComponent { handleApplyFilters = () => { const { filters } = this.state; // 发布全局事件以便其他组件订阅 window.dispatchEvent( new CustomEvent('applyGlobalFilters', { detail: filters }) ); } render() { return ( <div> {/* 渲染过滤表单 */} <button onClick={this.handleApplyFilters}>应用</button> </div> ) } } export default FiltersControl; ``` 为了让其他可视化组件能够响应这个新的全局事件，可以在各个视图组件内添加相应的侦听器： ```javascript componentDidMount() { window.addEventListener('applyGlobalFilters', this.onGlobalFiltersApplied); } onGlobalFiltersApplied(event) { const appliedFilters = event.detail; // 更新当前组件的状态或者其他操作来反映新设置好的过滤参数 this.setState({ ... }); } ``` #### 后端支持 对于某些复杂场景下可能还需要调整服务器端 API 来处理来自客户端的新请求模式。例如当用户选择了多个维度作为联合查询条件时，则需确保 SQL 查询构建器能正确解析并执行多维联接查询[^2]: ```python from superset.connectors.sqla.models import SqlMetric, TableColumn from sqlalchemy.orm.session import Session as SASession def apply_cross_filters(query_obj, filter_values): """根据传入的交叉筛选条件动态修改SQLAlchemy ORM查询""" session: SASession for column_name, value_list in filter_values.items(): table_column: TableColumn = query_obj.datasource.get_column(column_name) if not table_column or not isinstance(value_list, list): continue # 构建IN子句 clause = table_column.column.in_(value_list) # 将条件附加到原始查询上 query_obj.having_criteria.append(clause) # 修改后的视图函数片段 @csrf.exempt @app.route('/api/v1/chart/<chart_id>/data') def get_chart_data(chart_id=None): ... cross_filter_params = request.args.getlist('crossFilters[]') try: parsed_filters = json.loads(cross_filter_params[0]) if cross_filter_params else {} apply_cross_filters(form.query_obj(), parsed_filters) except Exception as e: logging.error(f'Failed to parse cross-filters params: {e}') abort(400, "Invalid cross-filters parameters") result = form.get_df() ... return jsonify({'result': result}) ```
评论 33
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值