Online图表配置手册
===
# Online 图表配置文档
## 一、配置单个数据源的图表
- 配置地址: `/online/graphreport`
### 具体步骤
1. 在页面中点击 `新增` 按钮
2. 在打开的弹窗中输入你的图表信息。其中,必填项有:
- 图表名称
- 编码(编码是唯一的)
- X轴字段(数据源中被当做 X 轴的字段)
- Y轴字段(数据源中被当做 Y 轴的字段)
- 查询SQL/数据JSON
3. 其中有几个动态的内容区域,分别是:
- 当 `数据类型` 字段选为 `JSON` 后,`查询SQL` 字段会被替换成 `数据JSON` 字段,该字段会验证你的JSON字符串格式是否正确,反之则不变
4. 配置列表字段
- 列表字段前两项是配置 数据表格 的 `列(columns)`
- `字段名` 是必填的,对应 `column.dataIndex`
- `字段文本` 是对字段名的描述,对应 `column.title`,不填则不显示
- `是否显示` 默认勾选,如果去掉勾选则不显示此列
- `计算总计` 默认不勾选,如果勾选上则会对当前列所有的数据进行求和,如果存在非数字的内容,则拒绝计算并提示"包含非数字内容"
- `是否查询` 默认不勾选,如果勾选上则会在图表最上方显示一个表单,用于筛选表格的数据
- `字段类型` 默认为空,可选择查询条件表单的类型,可选值有:数值类型、日期类型、字符类型、长整型
- `查询模式` 默认为空,可选择查询条件的筛选方式,如果选择了范围查询,则会显示两个表单,一个是开始值,一个是结束值,共同完成筛选
5. 点击右下角的`确定`按钮完成添加操作
### 使用方法
- 在 `操作` 列中,选中 `更多`,点击 `功能测试` 可以查看你配置的效果。
- 效果会根据不同的 `展示模板` 显示不同的布局
### 配置示例:JSON数据格式
假如我有一段JSON,我要将它配置成和下图一样图表,那么需要怎么做呢?

#### 第一步:准备好你需要的JSON
```json
[
{"day": "星期一", "step": 1234, "assess": "良"},
{"day": "星期二", "step": 1884, "assess": "优"},
{"day": "星期三", "step": 1671, "assess": "良+"},
{"day": "星期四", "step": 2197, "assess": "优+"},
{"day": "星期五", "step": 1342, "assess": "中"},
{"day": "星期六", "step": 545, "assess": "差"},
{"day": "星期日", "step": 244, "assess": "极差"}
]
```
#### 第二步:填写JSON
点击“新增”按钮,填写一些基本信息,然后将 `数据类型` 改为 `JSON`,然后将JSON填入`数据JSON`字段中,如下图

#### 第三步:配置数据字段
数据字段即`X轴字段`、`Y轴字段`和`Y轴文字`。
`X轴字段` 顾名思义,就是需要在X轴显示的字段,根据上图示例图表中我们可以发现,X轴方向显示的是星期一到星期日,而在准备的json中,`day`字段是存储星期信息的,所以我们要将 `X轴字段`处填写成`day`。
`Y轴字段` 也是如此,即对应需要在Y轴上显示的字段,这里我们填写上 `step`
`Y轴文字` 是对Y轴数据的一个解释。这里我们填上`步数`,那么就会在鼠标悬浮在图表上时直观的显示出来,如下图所示。

### 第四步:配置数据表格的列
在`列表字段`下面的表格中配置,配置示例如下

这里的配置是配置数据表格的列信息,只有配置上去的字段才会被显示出来。
数据表格可以计算列的总数,当`计算总计`被勾选上之后,会在数据表格最下面显示一行“总计”,当所有的`计算总计`都没被勾选的话,那么就不会显示这一行,如果要计算总计的列中某一行包含非数字的值,那么将会计算失败,并显示错误信息(包含非数字内容)
### 第五步:提交并测试功能
点击右下角的`确定`按钮并成功保存之后,我们可以在新增加的数据行右侧点击`更多 --> 功能测试`

最终显示效果如下:

我们发现只有一个柱状图,而刚刚配置的数据表格并没有显示出来,这是因为`图表类型`只配置了一个柱状图。我们回到列表页面,点击编辑按钮,在`图表类型`处勾选`数据列表`,如下图所示

点击`确定`保存,再点击功能测试,最终显示效果如下:

至此,配置JSON数据格式的图表就已经完成了
### 配置SQL数据格式
配置SQL数据格式的图表与JSON的步骤类似,只是需要将`数据类型` 改为 `SQL`即可,在`查询SQL`处填写上你的SQL语句,填写好`X轴字段`、`Y轴字段`和`Y轴文字`点击`确定`保存即可
## 二、配置多数据源的图表
多数据源图表可以将你配置过的`单数据源图表`整合到一个页面中,并且可以进行分组、排序
- 配置地址: `/online/graphreport/templet`(暂定)
### 具体步骤
2. 点击页面中的 `新增` 按钮
3. 在打开的弹窗中输入你的图表信息。其中,必填项有:
- 报表名称
- 报表编码(编码是唯一的)
- 报表风格(Tab风格、单排布局、双排布局、组合布局)
4. 图表配置
- 图表 (必填项,选择的是你配置过的`单数据源图表`)
- 图表类型(如果选择`不配置`,那么则应用选择的`单数据源图表`中配置的`图表类型`,如果配置了则优先显示此处配置的图表类型)
- 组合编码(必填项,只能为数字,数字越小越往前排)
5. 点击右下角的`确定`按钮完成添加操作
### 注意事项
1. 如果`报表风格`配置成了`组合布局`,那么就会将配置的图表显示在一张图表内,并且`图表类型`只能配置成`柱状图`或`曲线图`,即使配置成了其他的类型,实际运行中也一样不会生效
### 使用方法
- 在 `操作` 列中,选中 `更多`,点击 `功能测试` 可以查看你配置的效果。
- 效果会根据不同的 `报表风格`和`组合展示风格` 显示不同的布局
### 配置示例
#### 第一步:配置图表名称、编码、风格、多图表组合等
示例配置图如下

#### 第二步:查看效果
在新增加的数据行右侧点击`更多 --> 功能测试`

最终显示效果如下:




- 项目介绍
- 新手入门教程
- 开发环境准备
- 基础环境要求
- 基础环境与工具安装
- 开发环境搭建
- 如何启动项目
- 平台技术点
- Maven私服设置
- 切换其他数据库
- Websorm通过SVN下载项目
- docker搭建开发环境
- 前端多环境构建配置2.4+
- 快速开始
- HelloWorld
- 上线发布
- JAR部署方案
- WAR部署方案
- 极简部署方案
- Docker镜像制作
- JAR分离打包
- 开启Nginx压缩
- bak
- 2.3 Docker镜像制作
- JAR分离打包方案二
- 2.3前端配置API地址
- 微服务切换
- 微服务整体解决方案2.4+
- 单体升级为微服务方案2.4+
- 微服务快速调试2.4+
- 微服务熔断/降级/限流2.4+
- 微服务Feign接口调用示例2.4+
- jeecg-boot-starter 2.4+
- xxl-job定时任务集成2.4+
- Redisson分布式锁集成2.4+
- rabitmq消息队列集成2.4+
- Redis缓存集成2.4+
- 消息总线用法2.4+
- jeecg-cloud-module2.4+
- 单体升级为微服务方案2.3
- 系统监控跨域问题修复2.3
- 微服务中新增服务接口2.3
- 微服务上线发布
- 微服务上线部署(Windows)
- 微服务上线部署(Centos)
- 微服务上线部署(Ubuntu)
- docker-compose发布
- 2.3版微服务文档
- 微服务配置中心
- RabbitMq安装教程Win
- 通过docker-compose文件部署微服务项目
- 代码生成器
- 代码生成器简介
- 代码生成器使用教程
- 代码生成器配置文件
- 如何自定义生成器模板
- 弃用GUI模式(不建议使用)
- 代码生成器模板
- 如何使用代码生成器
- JAR方式发布如何使用代码生成器
- 生成代码优化
- Online导入表过滤规则
- 常见问题(代码生成)
- 后端开发技巧
- 常用问题汇总
- 自定义注解用法
- Spring缓存注解@Cacheable
- 字典翻译注解@Dict
- 数据权限注解@PermissionData
- 日志记录注解@AutoLog
- 菜单路由配置
- 菜单配置说明
- 带参数路由菜单
- 路由菜单规则
- 菜单快速SQL
- 聚合路由菜单
- 数据快照功能如何用?
- 快速创建module模块
- 旧:新建maven模块项目?
- 查询过滤器用法
- 系统日志怎么插入?
- 自定义sql分页实现
- 针对敏感数据,加密传递方案
- redis 如何使用?
- 事务如何使用?
- 动态数据源使用
- 定时任务如何开发?
- 系统通知接口
- 消息推送接口
- JeecgBoot连接达梦数据库
- 接口敏感数据安全
- 批量插入效率建议
- 短信接口配置(阿里大鱼短信)
- 自定义注解限制重复提交
- 邮箱配置文档
- 公文发文收文
- WPS配置文档
- 公文发文收文使用手册
- WPS集成代码解读
- 积木报表设计器数据集使用
- 父子编码使用说明
- 我的文档安全配置
- 文档预览
- 在线多数据源
- 导入校验工具类
- druid数据库密码加密
- 系统文件上传
- 统一文件上传规则
- MinIO配置
- 阿里云OSS配置
- UI前端开发技巧
- 如何更改默认主题
- Form表单开发特殊性
- Icon图标扩展方法
- vuex使用详解
- vue路由带参总结
- 全局配置文件
- 列表自定义列实现
- 国际化改造方案
- 常用命令
- 报表开发
- 报表开发技术点
- 自定义报表组件
- 源码解读
- 自定义组件
- 前端技巧
- components包下文件描述
- JDictSelectTag字典标签
- duplicateCheck表单字段重复校验通用JS
- JVxeTable行编辑
- 组件配置文档
- 自定义组件
- 封装自定义组件
- 自定义组件增强
- 使用示例
- 常见问题解答
- JEditableTable帮助文档
- JMultiSelectTag多选组件
- JPopup弹窗选择组件
- JSearchSelectTag字典表的搜索组件
- JSelectDepart部门选择组件
- JSelectMultiUser用户多选组件
- JSelectUserByDep根据部门选择用户
- JTreeDict分类字典树形下拉组件
- JTreeSelect树形下拉框 (异步加载)
- JInput 查询组件
- JCron 帮助文档
- JCategorySelect 帮助文档
- JUpload上传组件
- JImageUpload图片上传组件
- JSuperQuery高级查询组件
- JAreaLinkage省市县三级联动
- JEllipsis超长截取显示
- JDate 日期组件
- JCheckbox组件
- JCodeEditor组件
- JSelectMultiple多选下拉组件
- JTreeSelect树形下拉组件
- JImportModal组件
- JAsyncTreeList异步树表格
- JFormContainer使用文档
- JMarkdownEditor使用文档
- 前端开发坑(一定要注意)
- 按需加载方案
- 按需加载@减小打包
- JeecgBoot实战-按需加载方案
- 表格的换行与不换行
- 旧:表格的换行与不换行
- 主子表子表下拉框、时间框弹框被遮挡优化
- 前端依赖包package.json
- 如何实现多列表单
- 前端字典缓存用法
- 自定义首页
- 门户首页Portal权限控制
- 系统权限用法
- JAVA请求权限控制
- 页面按钮权限用法
- 列表列字段权限控制
- 表单权限
- 显示隐藏控制
- 禁用控制用法一
- 禁用控制用法二
- 子表行字段的禁用和隐藏控制
- 数据权限
- 数据权限规则篇
- 数据权限用法篇
- 编码对接数据权限(未用查询过滤器)
- 权限配置自定义SQL
- 二级部门权限管理
- 填值规则(编码生成)
- 校验规则(高级校验)
- 列表列字段导出权限示例
- 备份
- 通过URL方式配置数据权限
- Online表单
- Online菜单配置
- Online开发初体验
- Online表单配置
- Online表单一对多表单配置
- Online表单删除说明
- Online表单标准字段说明
- Online树列表表单配置
- Online表单配置参数说明
- online 导入导出值转换器
- Online表单填值规则配置
- Online表单排版
- Online树列表表单配置(个性化)
- Online表单查询配置说明
- Online表单使用表单设计器
- Online表单控件
- 下拉框@多选框@单选框
- 下拉多选
- 下拉搜索
- Popup控件
- 富文本控件
- 时间控件
- 用户选择器
- 部门选择器
- 自定义树控件
- 分类字典树控件
- Online之popup使用
- 下拉联动组件
- markdown编辑器
- 省市区组件
- 字段排列顺序调整
- 字段显示隐藏控制
- 字段校验规则使用
- 控件配置Href
- 控件默认值表达式
- 开关控件
- Online权限配置( 新版 20200914)
- 字段权限配置与授权
- 按钮权限配置与授权
- 数据权限配置与授权
- Online权限配置
- 列表字段权限(显示与隐藏)
- 表单字段权限(隐藏和禁用)
- 列表按钮权限(隐藏)
- 列表数据权限
- 树形表单数据权限配置
- 二次开发(在线增强)
- online基础篇-JS增强
- online基础篇-JS增强(表单渲染)
- JS增强 API
- 列表
- 表单
- JS增强 实战示例
- 列表自定义按钮
- 表单自定义按钮 改变控件的值
- 修改控件值【从表】
- 修改控件值【单(主)表】
- online表单JS增强实现下拉联动
- 表单提交前事件
- 页面加载时设置表单默认值
- online基础篇-SQL增强
- online基础篇-自定义按钮
- Online自定义按钮-表达式用法
- online基础篇-java增强
- Online java增强 导入
- Online java增强 导出
- Online java增强 查询
- online升级篇-表单API接口
- online升级篇-扩展控件类型
- edu
- Online表单专题课程
- 备注
- Online表单权限配置按钮/列/表单字段的显示或隐藏
- 列表权限
- 列表字段的显示或隐藏
- 列表操作按钮的显示或隐藏
- 列表自定义按钮的显示或隐藏
- 表单权限
- 表单字段的显示或隐藏
- 表单字段的禁用或可编辑
- Online导出支持图片
- Online表单视图功能
- JVXETable和JEditableTable切换方式
- 通过字段href实现3张表的关联
- 从数据库导入表单配置排除表名
- 表单配置[扩展参数]使用手册
- Online报表
- Online图表
- Online图表配置手册
- 列表数据显示规则
- 组合报表的配置方式
- 如何配置菜单
- 常见问题
- JS增强
- 参数说明
- Online报表
- online报表-使用步骤
- online报表-动态参数
- 如何配置报表菜单
- Online报表权限配置
- Online报表系统变量应用
- 参数说明
- Online报表排序
- 字段href
- 字典配置
- online报表-合计
- online报表-配置分组标题
- 高级实战技巧
- HBuilderX打包APP
- 1.Build-JeecgBoot项目
- 2.HBuilderX 打包APP
- HBuilder打包APP手机端安装配置教程
- Websocket业务对接
- WebSocket的集成
- SAAS多租户用法
- 如何集成积木报表
- 【内测】使用jdk14启动项目
- CAS单点登录
- CAS单点登录服务端准备
- 单点登录流程图
- 单点登录配置说明(2.3.1+)
- archive
- 2.JeecgBoot后端对接CAS步骤
- 3.JeecgBoot前端项目对接CAS步骤(2.3.0)
- 表单设计器
- 介绍
- 基础操作
- 配置字段属性
- 配置表单属性
- 配置到菜单
- 移动表单设计
- 表单多视图(移动)
- 表单组件
- 基础字段
- 单选、多选、下拉框
- 日期、时间选择器
- 高级组件
- 文本
- 按钮
- 分隔符
- 文件上传和图片上传
- 布局组件
- Tabs
- 卡片
- 栅格布局
- JEECG字段
- 设计子表
- 表字典(POPUP/下拉)
- 用户组件、部门组件
- 高级操作
- JS增强
- 全局JS增强
- 按钮JS增强
- JS增强示例
- CSS增强
- 表单增强
- 自定义接收URL
- 外部JS\CSS增强
- 控件取值
- 默认值表达式
- 远程API取值
- 填值规则
- 数据绑定映射
- 业务场景
- 远端选项数据
- 高级查询
- Elasticsearch安装与配置
- 高级查询界面
- 权限配置
- 表单字段权限
- 列表数据权限
- 列表按钮权限
- 角色授权
- 路由配置
- 表单对外接口
- 二次开发
- 自定义新控件
- 上传配置(七牛配置)
- 上传云存储自定义2.4+
- 旧:基础操作手册
- 旧:高级操作手册
- AutoPOI(Excel工具)
- 快速文档
- 单表数据导出多表头示例
- 单表数据多表头导入注意
- 导出自定义选择列导出
- @excel注解使用
- excel根据模板导出
- 一对多导出needMerge
- 第三方登录
- 企业微信配置
- 钉钉配置
- 企业微信集成方案
- APP开发
- 后台推送消息给移动端
- 小结
- 编码规范
- 代码规范
- 建表规范
- 个人备忘录
- 小白实战课程
- 任务节点直接关联多节点分支
- 使用排他网管的分支
- 并行网管分支
- 任务节点人员配置表达式使用
- 会签属性循环集合表达式使用
- 流程监听
- 节点配置地址
- 多数据源使用
- 自定义开发流程小结
- 登录时不选择部门不能进入主页面
- docker安装中文字体
- cloud system api
- jvxe升级 - LOWCOD-812
- cloud 跨域问题
- online同步数据库 问题
- online自动测试
- jeecg-uniapp开发
- 开发环境搭建
- 项目简介
- 打包项目
- APP打包
- 微信小程序打包
- H5打包
- 小程序发布
- API接口配置
- uniapp推送
- 后台定时unipush推送配置
- FQA
- 数据库兼容问题
- postgres int类型 实体布尔类型插入数据失败
- docker制作达梦数据库镜像