Donut

阅读时间约 4 分钟

F6 内置了甜甜圈 Donut 节点，其默认样式如下。标签文本位于圆形中央，圆形周围根据给定字段的占比绘制甜甜圈统计图。

使用方法

如内置节点一节所示，配置节点的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，其余的节点的通用属性以及各个节点类型的特有属性（见内置节点类型）均支持这三种配置方式。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'donut'，并为 donut 节点配置 donutAttrs 指定参与统计的字段（需要包含两个及以上合法字段，合法是指每个字段格式为 [key: string]: number），即可使用 donut 节点。若 donutAttrs 未指定，或 donutAttrs 中的合法字段数少于 2，则该节点将被显示为 circle 节点。甜甜圈图的颜色将会使用默认色板，若需自定义，则传入 donutColorMap 字段。

const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    type: 'donut', // 节点类型
    donutAttrs: {  // 甜甜圈字段，每个字段必须为 [key: string]: number
      prop1: 10,
      prop2: 20,
      prop3: 25,
      prop5: 10,
      prop6: 20,
    },
    // donutColorMap: { // 甜甜圈颜色映射，字段名与 donutAttrs 中的字段名对应。不指定则使用默认色板
    //   prop1: '#8eaade',
    //   prop2: '#55a9f2',
    //   prop3: '#0d47b5'
    // },
    // ... 其他配置
  },
});

2 在数据中动态配置

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

const data = {
  nodes: [
  {
	  id: 'node0',
    type: 'donut', // 节点类型
    donutAttrs: {  // 甜甜圈字段，每个字段必须为 [key: string]: number
      prop1: 10,
      prop2: 20,
      prop3: 25,
      prop5: 10,
      prop6: 20,
    },
    // donutColorMap: { // 甜甜圈颜色映射，字段名与 donutAttrs 中的字段名对应
    //   prop1: '#8eaade',
    //   prop2: '#55a9f2',
    //   prop3: '#0d47b5'
    // },
    ... // 其他配置
  },
    ... // 其他节点
  ],
  edges: [
    ... // 边
  ]
}

配置项说明

donut 节点支持节点通用配置，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解：

名称	含义	类型	备注
size	圆的直径	Number / Array	`size` 为数组时，取第一个值
style	背景圆的默认样式，与 circle 节点类似	Object	Canvas 支持的属性
label	标签文本内容	String
labelCfg	标签文本配置项	Object
donutAttrs	甜甜圈统计字段	{ [key: string]: number }	donut 节点特有。必须含有两个及以上的合法字段，才能够显示出甜甜圈图
donutColorMap	甜甜圈色板	{ [key: string]: string }	donut 节点特有。不指定将使用默认色板。key 与 donutAttrs 中的字段名对应
stateStyles	各状态下的样式	Object	详见配置状态样式
linkPoints	视觉上的四个锚点	Object	默认不显示，应与 anchorPoints 配合使用。二者区别请看 linkPoints
icon	圆上 icon 配置	Object	默认不显示 icon

样式属性 style

Object 类型。支持节点通用样式。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      type: 'donut',
      label: 'donut',
      donutAttrs: {
        prop1: 10,
        prop2: 20,
        prop3: 25,
        prop5: 10,
        prop6: 20,
      },
    },
  ],
};
const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    // type: 'donut',  // 在数据中已经指定 type，这里无需再次指定
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
    },
    donutColorMap: { // 指定色板
      prop1: '#8eaade',
      prop2: '#55a9f2',
      prop3: '#0d47b5',
      prop5: '#7b8085',
      prop6: '#003870'
    },
  },
});
graph.data(data);
graph.render();

标签文本配置 labelCfg

Object 类型。通过 labelCfg 配置标签文本。支持节点通用标签配置。基于上面样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 节点其他属性
    labelCfg: {
      position: 'bottom',
      offset: 10,
      style: {
        // ... 文本样式的配置
      },
    },
  },
});
// ...

linkPoints

Object 类型。可以指定节点周围「上、下、左、右」四个方向上的四个小圆点。

⚠️ 注意: 区分于 anchorPoints： anchorPoints 是真正用于指定该节点相关边的连入位置的「数组」，见 anchorPoints；而 linkPoints 仅是指定是否「绘制」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。

名称	含义	类型	备注
top	是否显示上部的圆点	Boolean	默认为 `false`
bottom	是否显示底部的圆点	Boolean	默认为 `false`
left	是否显示左侧的圆点	Boolean	默认为 `false`
right	是否显示右侧的圆点	Boolean	默认为 `false`
size	圆点的大小	Number	默认为 `3`
fill	圆点的填充色	String	默认为 `'#72CC4A'`
stroke	圆点的描边颜色	String	默认为 `'#72CC4A'`
lineWidth	圆点描边的宽度	Number	默认为 `1`

基于上面样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 其他属性
    linkPoints: {
      top: true,
      bottom: true,
      left: true,
      right: true,
      fill: '#fff',
      size: 5,
    },
  },
});
// ...

图标 icon

Object 类型。通过配置 icon，可以在节点上显示小图标。

名称	含义	类型	备注
show	是否显示 icon	Boolean	默认为 `false`，不显示
width	icon 的宽度	Number	默认为 `16`
height	icon 的高度	Number	默认为 `16`
img	icon 的地址或 base64	String	若配置则表示使用图片作为 icon
text	icon 的 iconfont	String	若配置则表示使用 iconfont 作为 icon

基于上面样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置，使之达到如下图效果。

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 其他属性
    icon: {
      show: true,
      //img: '...', 可更换为其他图片地址
      width: 25,
      height: 25,
      // img: '...', 可更换为其他图片地址
      // text: '...', 使用 iconfont
    },
  },
});
// ...