# Online图表配置 > 无需编码,通过在线配置方式,实现曲线图,柱状图,折线图,数据等报表,支持自定义排版布局,实现人人皆可编码。 [TOC] ## 一、配置单个数据源的图表 ### 具体步骤 1. 在页面中点击 `新增` 按钮 2. 在打开的弹窗中输入你的图表信息。其中,必填项有: - 图表名称 - 编码(编码是唯一的) - X轴字段(数据源中被当做 X 轴的字段) - Y轴字段(数据源中被当做 Y 轴的字段) - 查询SQL/数据JSON 3. 其中有几个动态的内容区域,分别是: - 当 `数据类型` 字段选为 `JSON` 后,`查询SQL` 字段会被替换成 `数据JSON` 字段,该字段会验证你的JSON字符串格式是否正确,反之则不变;当切换到`API`后,`查询SQL` 字段会被替换成 `API接口` 字段; 4. 配置列表字段 5. 点击右下角的`确定`按钮完成添加操作 ### 使用方法 - 在 `操作` 列中,选中 `更多`,点击 `功能测试` 可以查看你配置的效果。 - 效果会根据不同的 `展示模板` 显示不同的布局 ### 配置示例:JSON数据格式 假如我有一段JSON,我要将它配置成和下图一样图表,那么需要怎么做呢? ![](https://img.kancloud.cn/e9/7a/e97ab91ca16bdb20b8a4b95880b44337_765x301.png) #### 第一步:准备好你需要的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`字段中,如下图 ![](https://img.kancloud.cn/d3/a8/d3a88111fb45ea69ae2909fa4db718a4_1193x564.png) #### 第三步:配置数据字段 数据字段即`X轴字段`、`Y轴字段`和`Y轴文字`。 `X轴字段` 顾名思义,就是需要在X轴显示的字段,根据上图示例图表中我们可以发现,X轴方向显示的是星期一到星期日,而在准备的json中,`day`字段是存储星期信息的,所以我们要将 `X轴字段`处填写成`day`。 `Y轴字段` 也是如此,即对应需要在Y轴上显示的字段,这里我们填写上 `step` `Y轴文字` 是对Y轴数据的一个解释。这里我们填上`步数`,那么就会在鼠标悬浮在图表上时直观的显示出来,如下图所示。 ![](https://img.kancloud.cn/88/e7/88e71b064bfb42e57733b039eb769f28_248x406.png) ### 第四步:配置数据表格的列 在`列表字段`下面的表格中配置,配置示例如下 ![](https://img.kancloud.cn/be/6b/be6b0158f1ec1f10d3b4b9eb8543fff0_1170x340.png) 这里的配置是配置数据表格的列信息,只有配置上去的字段才会被显示出来。 数据表格可以计算列的总数,当`计算总计`被勾选上之后,会在数据表格最下面显示一行“总计”,当所有的`计算总计`都没被勾选的话,那么就不会显示这一行,如果要计算总计的列中某一行包含非数字的值,那么将会计算失败,并显示错误信息(包含非数字内容) ### 第五步:提交并测试功能 点击右下角的`确定`按钮并成功保存之后,我们可以在新增加的数据行右侧点击`更多 --> 功能测试` ![](https://img.kancloud.cn/be/45/be45311a905a4aa116e31c92b91924e3_156x166.png) 最终显示效果如下: ![](https://img.kancloud.cn/79/38/7938a28060d64610d78750ba1ecc321e_1315x416.png) 我们发现只有一个柱状图,而刚刚配置的数据表格并没有显示出来,这是因为`图表类型`只配置了一个柱状图。我们回到列表页面,点击编辑按钮,在`图表类型`处勾选`数据列表`,如下图所示 ![](https://img.kancloud.cn/08/dc/08dcf3f76a93a70b26a02c17ca323238_373x194.png) 点击`确定`保存,再点击功能测试,最终显示效果如下: ![](https://img.kancloud.cn/d6/b2/d6b2787c9e8e36003dff3cd0537b83e0_1341x907.png) 至此,配置JSON数据格式的图表就已经完成了 ### 配置SQL数据格式 配置SQL数据格式的图表与JSON的步骤类似,只是需要将`数据类型` 改为 `SQL`即可,在`查询SQL`处填写上你的SQL语句,填写好`X轴字段`、`Y轴字段`和`Y轴文字`点击`确定`保存即可 ### 配置API数据格式 配置API数据格式的图表与JSON的步骤类似,只是需要将`数据类型` 改为 `API`即可,在`API接口`处填写上你的api路径,填写好`X轴字段`、`Y轴字段`和`Y轴文字`点击`确定`保存即可。 api接口例子:http://api.jeecg.com/mock/83/graphreport/apitest 接口返回的数据结构: ~~~ {"data":[ {"sex":0,"cnt":10}, {"sex":1,"cnt":1}, {"sex":2,"cnt":4} ]} ~~~ *注:数据最外层用data包裹*