数据可视化中图表的低无一体

介绍

数据可视化提供了自定义图表模板的功能,以满足现有图表模板无法满足业务需求的情况。

如何使用

  1. 点击数据可视化页面头部的“图表模板”
    image.png
  2. 点击传进按钮后弹出图表模板表单,填写后提交保存
    image.png
  3. 找到刚刚创建的图表模板,点击操作栏中的“低无一体”按钮
    image.png
  4. 点击弹窗底部的“生成sdk”按钮
    image.png
  5. 上一步操作完成后会重新刷新页面,再次找到该条数据,点击“低无一体”按钮,再次进来可以看到“下载模板工程”的按钮已经可以点击了,点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip
    image.png
  6. 解压kunlun-chart-sdk.zip后我们可以看到工程结构,在根目录下执行npm i安装依赖
    image.png
  7. 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件,可以修改里面的自定义展示和逻辑处理
  8. 完成自定义代码后去根目录运行npm run build打包代码,打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件,无需理会)
    image.png
  9. 回到自定义图表模板的管理页面,找到对应的数据行,再次点击“低无一体”按钮,在弹窗内上传上一步生成的kunlun-plugin.umd.jskunlun-plugin.css文件,上传完成后点击弹窗底部的“确定”按钮保存
    image.png
  10. 进入图表的编辑页面,在图表分类选择处,可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类,点击切换
    image.png
  11. 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式,内部是hello chart文字的图表。
    image.png

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/70.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2023年6月20日 下午4:07
下一篇 2023年11月2日 下午1:58

相关推荐

  • 流程设计流程结束通知SPI接口        后端

    流程设计流程结束通知SPI接口

    1.实现SPI接口 import pro.shushi.pamirs.meta.common.spi.SPI; import pro.shushi.pamirs.meta.common.spi.factory.SpringServiceLoaderFactory; import pro.shushi.pamirs.workflow.app.api.entit…

    2023年12月26日
    00
  • 【界面设计器】左树右表        未分类

    【界面设计器】左树右表

    阅读之前 你应该: 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体:在视图中提供数据源的主要组件,并且所有动作都围绕着该主体展开。 一级搜索:在表格视图中,上方直观可见的搜索区,为表格提供筛选功能。 二级搜索:与一级搜索不同的是,其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类…

    2023年11月1日
    00
  • 表格字段配置Switch开关        前端

    表格字段配置Switch开关

    在业务开发中,我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢,下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction,代表的是该字…

    2023年11月21日
    00
  • 数据可视化-数据可视化数据获取示例        数据可视化

    数据可视化-数据可视化数据获取示例

    场景 根据测试商品,汇总数据通过测试统计商品透出到数据可视化图表数据; 统计商品类目的最大库存以及平均售价信息 测试商品模型 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品", labelFields = "name") @Model.Code…

    2天前
    00
  • 设计器常见问题汇总        设计器

    设计器常见问题汇总

    1、设计器中给无代码模型新增字段报错 问题描述 分布式部署情况,即设计器和业务代码(低代码)分开部署的情况,在模型设计器或界面设计器中对低代码模型新增字段,保存时“报函数错误”。 问题原因 模型设计器或者界面设计器对低代码模型新增字段是,会执行低代码模型对应表的DDL,即新增字段的DDL; 因为设计器和业务代码分布式部署,在设计器中拿不到低代码的数据源而报错…

    2023年11月16日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注