跳到主要内容

关系图配置

现在来看一下关系图的使用步骤

一、添加关系图​

点击报表编辑页面操作栏的“”图标，选择“关系图 ->普通关系图”，就可以添加一个“普通关系图”；

二、设置关系图样式​

添加好关系图后，点击选中要修改的图表，右侧操作栏，选择“样式”，可对柱形图的样式做设置； 以普通关系图为例：

（1）标题设置​

设置关系图顶部标题，各个参数对应的意思如下：

  • 显示：设置标题的显示和隐藏；
  • 标题文字：标题的内容；
  • 字体颜色：标题的字体颜色；
  • 字体加粗：标题的字体粗细设置，包含加粗和加细；
  • 字体大小：标题字体的大小；
  • 标题位置：标题的位置设置，分为left、center、right；
  • 顶边距：标题距离顶部的距离；

（2）中心点设置​

设置关系图距离中心位置的距离，各个参数对应的意思如下：

  • X轴：水平方向上，距离中心点的距离；值越小，越靠右。
  • Y轴：垂直方向上，距离中心点的距离；值越小，越靠下。

（3）数值设置​

关系图上数值的设置，各个参数对应的意思如下：

  • 显示：数值是否显示；
  • 字体大小：数值的字体大小；
  • 字体颜色：数值的字体颜色；
  • 字体粗细：数值的字体粗细；
  • 字体位置：设置数值的位置，包含上方、左边、右边、下方、内部；

（4）提示语设置​

关系图预览的时候，显示的提示语的样式设置，各个参数对应的意思如下：

  • 显示：提示语是否显示；
  • 字体大小：提示语的字体大小设置；
  • 字体颜色：提示语的字体颜色设置；

（5）图例设置​

关系图图例的设置，各个参数对应的意思如下：

  • 显示：图例是否显示；
  • 字体大小：图例字体的大小设置；
  • 字体颜色：图例字体颜色的设置；
  • 纵向位置：图例纵向位置设置，包含：顶部和底部。设置为顶部，表示图例在图表的顶部；设置为底部，表示图例在图表的底部。
  • 横向位置：图例的横向位置设置，包含：左对齐、居中、右对齐。设置为左 对齐，表示图例在左边；设置为居中，表示图例在中间；设置为右对齐，表示图例在右边。
  • 布局朝向：图例的布局朝向设置，包含横排和竖排。设置为横排，标识图例都在一排显示；设置为竖排，表示图例都在一列显示。

（6）自定义颜色​

定义一大类的颜色；

三、数据源配置​

关系图支持3种数据形式

  • SQL数据
  • 静态API数据
  • 动态API数据

(1) SQL数据​

使用SQL形式，可直接连接数据库，将SQl种的数据筛选并显示在图表上。

点击报表编辑器右侧的操作栏，点击“数据”，选择"数据类型"为“SQL数据集”，按步骤操作即可，下边讲解一下各个参数的意思：

备注：
关系图需要绑定两个数据集；
  • 绑定数据集：是左侧绑定过的数据集，可选择任意一个SQL类型的数据集，主要显示节点数据；
  • 分类属性：是X轴绑定数据库的字段；
  • 值属性：是Y轴绑定数据库的字段；
  • 系列类型：数据类型字段；
  • 绑定节点关系数据集：绑定的另一个数据集，主要是显示对应关系；
  • 来源属性：关系数据集中来源字段；
  • 目标属性：关系数据集中目标字段，来源和目标字段字段是为了显示关系线；

1.1 数据库配置字段如下​

(2) 静态API数据​

报表绑定的数据可以是静态API的形式。

点击报表编辑器右侧的操作栏，点击“数据”，选择"数据类型"为“Api数据集”，“Api类型”选择“静态数据”，点击“数据值”，输入静态类型即可，如：

{
"data":[
{"name":"测试0","value":28,"type":"北航"},
{"name":"测试1","value":9,"type":"南航"},
{"name":"测试2","value":23,"type":"东航"},
{"name":"测试3","value":8,"type":"西航"},
{"name":"测试4","value":8,"type":"中航"},
{"name":"测试5","value":8,"type":"南航"}
],
"links":[
{"source":"测试1","target":"测试0"},
{"source":"测试2","target":"测试0"},
{"source":"测试3","target":"测试1"},
{"source":"测试4","target":"测试1"},
{"source":"测试4","target":"测试2"},
{"source":"测试2","target":"测试3"},
{"source":"测试3","target":"测试2"},
{"source":"测试3","target":"测试1"},
{"source":"测试2","target":"测试1"},
{"source":"测试2","target":"测试4"},
{"source":"测试5","target":"测试0"},
{"source":"测试4","target":"测试0"},
{"source":"测试4","target":"测试1"},
{"source":"测试4","target":"测试2"},
{"source":"测试1","target":"测试0"},
{"source":"测试1","target":"测试4"},
{"source":"测试1","target":"测试3"},
{"source":"测试3","target":"测试0"},
{"source":"测试5","target":"测试1"},
{"source":"测试5","target":"测试4"}
]}

(3) 动态API数据​

绑定的数据也可以是动态API的形式。

点击报表编辑器右侧的操作栏，点击“数据”，选择"数据类型"为“Api数据集”，“Api类型”选择“动态数据”，选择“绑定数据集”，点击“运行”，就可以将数据渲染过来，代码如：

{
"data":[
{"name":"测试0","value":28,"type":"北航"},
{"name":"测试1","value":9,"type":"南航"},
{"name":"测试2","value":23,"type":"东航"},
{"name":"测试3","value":8,"type":"西航"},
{"name":"测试4","value":8,"type":"中航"},
{"name":"测试5","value":8,"type":"南航"}
],
"links":[
{"source":"测试1","target":"测试0"},
{"source":"测试2","target":"测试0"},
{"source":"测试3","target":"测试1"},
{"source":"测试4","target":"测试1"},
{"source":"测试4","target":"测试2"},
{"source":"测试2","target":"测试3"},
{"source":"测试3","target":"测试2"},
{"source":"测试3","target":"测试1"},
{"source":"测试2","target":"测试1"},
{"source":"测试2","target":"测试4"},
{"source":"测试5","target":"测试0"},
{"source":"测试4","target":"测试0"},
{"source":"测试4","target":"测试1"},
{"source":"测试4","target":"测试2"},
{"source":"测试1","target":"测试0"},
{"source":"测试1","target":"测试4"},
{"source":"测试1","target":"测试3"},
{"source":"测试3","target":"测试0"},
{"source":"测试5","target":"测试1"},
{"source":"测试5","target":"测试4"}
]}