# Online图表配置 > 无需编码，通过在线配置方式，实现曲线图，柱状图，折线图，数据等报表，支持自定义排版布局，实现人人皆可编码。 [TOC] ## 一、配置单个数据源的图表 ### 具体步骤 1. 在页面中点击 `新增` 按钮 2. 在打开的弹窗中输入你的图表信息。其中，必填项有： - 图表名称 - 编码（编码是唯一的） - X轴字段（数据源中被当做 X 轴的字段） - Y轴字段（数据源中被当做 Y 轴的字段） - 查询SQL/数据JSON 3. 其中有几个动态的内容区域，分别是： - 当 `数据类型` 字段选为 `JSON` 后，`查询SQL` 字段会被替换成 `数据JSON` 字段，该字段会验证你的JSON字符串格式是否正确，反之则不变；当切换到`API`后,`查询SQL` 字段会被替换成 `API接口` 字段; 4. 配置列表字段 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轴文字`点击`确定`保存即可 ### 配置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包裹*