Question

一、配置单个数据源的图表

• 配置地址: /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

[
    {"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（暂定）

具体步骤

1. 点击页面中的 新增 按钮
2. 在打开的弹窗中输入你的图表信息。其中，必填项有：
   • 报表名称
   • 报表编码（编码是唯一的）
   • 报表风格（Tab风格、单排布局、双排布局、组合布局）
3. 图表配置
   • 图表 （必填项，选择的是你配置过的单数据源图表）
   • 图表类型（如果选择不配置，那么则应用选择的单数据源图表中配置的图表类型，如果配置了则优先显示此处配置的图表类型）
   • 组合编码（必填项，只能为数字，数字越小越往前排）
4. 点击右下角的确定按钮完成添加操作

注意事项

1. 如果报表风格配置成了组合布局，那么就会将配置的图表显示在一张图表内，并且图表类型只能配置成柱状图或曲线图，即使配置成了其他的类型，实际运行中也一样不会生效

使用方法

• 在 操作 列中，选中 更多，点击 功能测试 可以查看你配置的效果。
• 效果会根据不同的 报表风格和组合展示风格 显示不同的布局

配置示例

第一步：配置图表名称、编码、风格、多图表组合等

示例配置图如下

第二步：查看效果

在新增加的数据行右侧点击更多 --> 功能测试

最终显示效果如下：