Online图表配置手册

Online 图表配置文档

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

  • 配置地址: /online/graphreport

具体步骤

  • 在页面中点击 新增 按钮
  • 在打开的弹窗中输入你的图表信息。其中，必填项有：
    • 图表名称
    • 编码（编码是唯一的）
    • X轴字段（数据源中被当做 X 轴的字段）
    • Y轴字段（数据源中被当做 Y 轴的字段）
    • 查询SQL/数据JSON
  • 其中有几个动态的内容区域，分别是：
    • 当 数据类型 字段选为 JSON 后，查询SQL 字段会被替换成 数据JSON 字段，该字段会验证你的JSON字符串格式是否正确，反之则不变
  • 配置列表字段
    • 列表字段前两项是配置 数据表格 的 列（columns）
      • 字段名 是必填的，对应 column.dataIndex
      • 字段文本 是对字段名的描述，对应 column.title，不填则不显示
    • 是否显示 默认勾选，如果去掉勾选则不显示此列
    • 计算总计 默认不勾选，如果勾选上则会对当前列所有的数据进行求和，如果存在非数字的内容，则拒绝计算并提示"包含非数字内容"
    • 是否查询 默认不勾选，如果勾选上则会在图表最上方显示一个表单，用于筛选表格的数据
    • 字段类型 默认为空，可选择查询条件表单的类型，可选值有：数值类型、日期类型、字符类型、长整型
    • 查询模式 默认为空，可选择查询条件的筛选方式，如果选择了范围查询，则会显示两个表单，一个是开始值，一个是结束值，共同完成筛选
  • 点击右下角的确定按钮完成添加操作

使用方法

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

配置示例：JSON数据格式

假如我有一段JSON，我要将它配置成和下图一样图表，那么需要怎么做呢？

img

第一步：准备好你需要的JSON

  1. [
  2.     {"day": "星期一", "step": 1234, "assess": "良"},
  3.     {"day": "星期二", "step": 1884, "assess": "优"},
  4.     {"day": "星期三", "step": 1671, "assess": "良+"},
  5.     {"day": "星期四", "step": 2197, "assess": "优+"},
  6.     {"day": "星期五", "step": 1342, "assess": "中"},
  7.     {"day": "星期六", "step": 545, "assess": "差"},
  8.     {"day": "星期日", "step": 244, "assess": "极差"}
  9. ]

第二步：填写JSON

点击“新增”按钮，填写一些基本信息，然后将 数据类型 改为 JSON，然后将JSON填入数据JSON字段中，如下图

img

第三步：配置数据字段

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

img

第四步：配置数据表格的列

在列表字段下面的表格中配置，配置示例如下

img

这里的配置是配置数据表格的列信息，只有配置上去的字段才会被显示出来。数据表格可以计算列的总数，当计算总计被勾选上之后，会在数据表格最下面显示一行“总计”，当所有的计算总计都没被勾选的话，那么就不会显示这一行，如果要计算总计的列中某一行包含非数字的值，那么将会计算失败，并显示错误信息（包含非数字内容）

第五步：提交并测试功能

点击右下角的确定按钮并成功保存之后，我们可以在新增加的数据行右侧点击更多 —> 功能测试

img

最终显示效果如下：

img

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

img

点击确定保存，再点击功能测试，最终显示效果如下：

img

至此，配置JSON数据格式的图表就已经完成了

配置SQL数据格式

配置SQL数据格式的图表与JSON的步骤类似，只是需要将数据类型 改为 SQL即可，在查询SQL处填写上你的SQL语句，填写好X轴字段、Y轴字段和Y轴文字点击确定保存即可

二、配置多数据源的图表

多数据源图表可以将你配置过的单数据源图表整合到一个页面中，并且可以进行分组、排序

  • 配置地址: /online/graphreport/templet（暂定）

具体步骤

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

注意事项

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

使用方法

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

配置示例

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

示例配置图如下

img

第二步：查看效果

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

img

最终显示效果如下：

img

img

img

img