<Recharts />

SankeyChart

Properties

• nameKeyStringoptional

  "name" 属性对应的 key 。

  默认值：name

• dataKeyString | Number | Functionoptional

  The key of a group of data which should be unique in a SankeyChart.

  默认值：value

• widthPercentage | Number

  The percentage value of the chart's width or a fixed width.

  默认值：'100%'

• heightPercentage | Number

  The percentage value of the chart's width or a fixed height.

  默认值：'100%'

• dataObject

  The source data, including the array of nodes, and the relationships, represented by links.

  格式：

  nodes: [
    { name: 'Visit' },
    { name: 'Direct-Favourite' },
    { name: 'Page-Click' },
    { name: 'Detail-Favourite' },
    { name: 'Lost' },
  ],
  links: [
    { source: 0, target: 1, value: 3728.3 },
    { source: 0, target: 2, value: 354170 },
    { source: 2, target: 3, value: 62429 },
    { source: 2, target: 4, value: 291741 },
  ],

• sortBooleanoptional

  Whether to sort the nodes on th y axis, or to display them as user-defined.

  默认值：true

• nodePaddingNumberoptional

  The padding between the nodes

  默认值：10

• nodeWidthNumber

  The width of node

  默认值：10

• linkWidthNumber

  The width of link

• linkCurvatureNumber

  The curvature of width

  默认值：0.5

• iterationsNumber

  The number of the iterations between the links

  默认值：32

• nodeObject | ReactElementoptional

  If set a object, the option is the configuration of nodes. If set a React element, the option is the custom react element of drawing the nodes.

  格式：

  <Sankey node={<MyCustomComponent />} />
  <Sankey node={{stroke: #77c878, strokeWidth: 2}} />

• linkObject | ReactElementoptional

  If set a object, the option is the configuration of links. If set a React element, the option is the custom react element of drawing the links.

  格式：

  <Sankey link={<MyCustomComponent />} />
  <Sankey link={{fill: #77c878 }} />

• marginObject

  The sizes of whitespace around the container.

  默认值：{ top: 5, right: 5, bottom: 5, left: 5 }

  格式：

  { top: 5, right: 5, bottom: 5, left: 5 }

• onClickFunctionoptional

  The customized event handler of click on the area in this group

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the area in this group

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the area in this group

• sourceXNumber

  The source number of X-axis

• sourceYNumber

  The source number of Y-axis

• sourceControlXNumber

  The source control of X-axis

• targetControlXNumber

  The target control of X-axis

• targetXNumber

  The target of X-axis

• targetYNumber

  The target of Y-axis