ipecharts.option.seriesitems.sankey module#

class ipecharts.option.seriesitems.sankey.Sankey(**kwargs: Any)[source]#

Bases: BaseWidget

Warning:

Autogenerated class

Sankey diagram

Sankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.

Example:

Visual Encoding:

The Sankey diagram encodes each node of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The label next to the small rectangle encodes the name of the node.

In addition, the edge between two small rectangles in the diagram encodes the link of the raw data. The width of edge is shown proportionally to the value of link.

type Unicode('sankey')#

id Unicode(None)#: Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

name Unicode(None)#: Series name used for displaying in [tooltip](#tooltip) and filtering with [legend](#legend), or updating data and configuration with setOption.

zlevel Float(None)#

zlevel value of all graphical elements in .

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

z Float(None)#

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

z has a lower priority to zlevel, and will not create new Canvas.

left Union(None)#

Distance between sankey component and the left side of the container.

left can be a pixel value like 20; it can also be a percentage value relative to container width like ‘20%’; and it can also be ‘left’, ‘center’, or ‘right’.

If the left value is set to be ‘left’, ‘center’, or ‘right’, then the component will be aligned automatically based on position.

top Union(None)#

Distance between sankey component and the top side of the container.

top can be a pixel value like 20; it can also be a percentage value relative to container width like ‘20%’; and it can also be ‘top’, ‘middle’, or ‘bottom’.

If the top value is set to be ‘top’, ‘middle’, or ‘bottom’, then the component will be aligned automatically based on position.

right Union(None)#

Distance between sankey component and the right side of the container.

right can be a pixel value like 20; it can also be a percentage value relative to container width like ‘20%’.

bottom Union(None)#

Distance between sankey component and the bottom side of the container.

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like ‘20%’.

width Union(None)#: Width of sankey component.

height Union(None)#: Height of sankey component.

nodeWidth Float(None)#: The node width of rectangle in Sankey diagram.

nodeGap Float(None)#: The gap between any two rectangles in each column of the Sankey diagram.

nodeAlign Unicode(None)#

Controls the horizontal alignment of nodes in the diagram.

May be:

left: initial nodes (those with no incoming links) are aligned to the left of the diagram.
right: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.
justify: initial and terminal nodes are aligned on the left and right edges.

Note when [orient](#series-sankey.orient) is vertical, nodeAlign controls vertical alignment.

layoutIterations Float(None)#: The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is 32. If you want the order of the nodes in the chart to be the same with the order in the original [data](#series-sankey.data), you can set the value to be 0.

orient Unicode(None)#: The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values are horizontal or vertical.

draggable Bool(None)#: The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to false.

edgeLabel Dict()#

> Since v5.4.1

The label style of each edge/link.

levels Any(None)#

The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:

``` levels: [{

depth: 0, itemStyle: {

color: ‘#fbb4ae’

}, lineStyle: {

color: ‘source’, opacity: 0.6

}

}, {

depth: 1, itemStyle: {

color: ‘#b3cde3’

}, lineStyle: {

color: ‘source’, opacity: 0.6

}

}]

```

You can also only set a certain layer:

``` levels: [{

depth: 3, itemStyle: {

color: ‘#fbb4ae’

}, lineStyle: {

color: ‘source’, opacity: 0.6

}

}]

```

label Dict()#: label describes the text label style in each rectangular node.

labelLayout Union(None)#

> Since v5.0.0

Unified layout configuration of labels.

It provide a chance to adjust the labels’ (x, y) position, alignment based on the original layout each series provides.

This option can be a callback with following parameters.

``` // corresponding index of data dataIndex: number // corresponding type of data. Only available in graph, in which it can be ‘node’ or ‘edge’ dataType?: string // corresponding index of series seriesIndex: number // Displayed text of label. text: string // Bounding rectangle of label. labelRect: {x: number, y: number, width: number, height: number} // Horizontal alignment of label. align: ‘left’ | ‘center’ | ‘right’ // Vertical alignment of label. verticalAlign: ‘top’ | ‘middle’ | ‘bottom’ // Bounding rectangle of the element corresponding to. rect: {x: number, y: number, width: number, height: number} // Default points array of labelLine. Currently only provided in pie and funnel series. // It’s null in other series. labelLinePoints?: number[][]

```

Example:

Align the labels on the right. Left 10px margin to the edge.

``` labelLayout(params) {

return {
x: params.rect.x + 10, y: params.rect.y + params.rect.height / 2, verticalAlign: ‘middle’, align: ‘left’

}

}

```

Set the text size based on the size of element bounding rectangle.

```

labelLayout(params) {

return {: fontSize: Math.max(params.rect.width / 10, 5)

};

}

```

itemStyle Dict()#: The style of node rectangle in Sankey diagram.

lineStyle Dict()#: The edge style of Sankey diagram

emphasis Dict()#: Configurations of emphasis state.

blur Dict()#

> Since v5.0.0

Configurations of blur state. Available when [emphasis.focus](#series-sankey.emphasis.focus) is set.

select Dict()#

> Since v5.0.0

Configurations of selected state. Available when [selectedMode](#series-sankey.selectedMode) is set.

selectedMode Union(None)#

> Since v5.0.0

Selected mode. It is disabled by default, and you may set it to be true to enable it.

Besides, it can be set to ‘single’, ‘multiple’ or ‘series’, for single selection, multiple selections and whole series selection.

> ‘series’ is supported since v5.3.0

data Any(None)#

The nodes list of the sankey diagram.

``` data: [{

name: ‘node1’, // This attribute decides the layer of the current node. depth: 0

}, {: name: ‘node2’, depth: 1

}]

```

Notice: The name of the node cannot be repeated.

nodes Any(None)#: Equals to [data](#series-sankey.data)

links Any(None)#

The links between nodes. Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links. For instance:

``` links: [{

source: ‘n1’, target: ‘n2’

}, {: source: ‘n2’, target: ‘n3’

}]

```

edges Any(None)#: Equals to [links](#series-sankey.links)

silent Bool(None)#: Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

animation Bool(None)#: Whether to enable animation.

animationThreshold Float(None)#: Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

animationDuration Union(None)#

Duration of the first animation, which supports callback function for different data to have different animation effect:

``` animationDuration: function (idx) {

// delay for later data is larger return idx * 100;

}

```

animationEasing Unicode(None)#: Easing method used for the first animation. Varied easing effects can be found at [easing effect example](https://echarts.apache.org/examples/en/editor.html?c=line-easing).

animationDelay Union(None)#

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

For example:

``` animationDelay: function (idx) {