# 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包裹*