Relationship Network

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
  Figure 1 Relationship network
  
• Text Label
  • Text Label: to show or hide text labels by clicking or .
  • Font: label font.
  • Font Size: font size of the label.
  • Color: font color of the label.
  • Font Width: font width of the label.
  • Position: position of the label.
• Connection Line
  • Color: color of the connection line.
  • Width: width of the connection line.
  • Length: length of the connection line.
  • Type: type of the connection line. The value can be Solid line, Dotted line, or Dash-dot line.
• Legend
  • Legend: to show or hide legends by clicking or .
  • Text: font size, color, and width of the legend.
  • Layout: to set the position, margin, and spacing of the legends.
  Figure 2 Legends of a relationship network
  

Data

• nodes: a node that contains the following fields:
  • name: label name of a node.
  • imgPath: URL of an image. If a node needs to use an image, set this parameter to the link address of the image. If this parameter is left blank, the node is displayed as the default circle.
  • category: data series field of a node. Data is grouped based on the value of the category field.
    • Add a data series: Click next to s to add a data series.
    • Configure a data series: Click > in front of the data series, and configure the specified style of the data series on the expanded panel, including the column name, radius, filling color, stroke color, and stroke width.
• links: a link that contains the following two fields:
  • source: the source node of the connection line. The value is the name of the source node.
  • target: the destination node of the connection line. The value is the name value of the target node.
• Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
• Converter: Select a converter to convert data into the data that meets the display requirements. For details, see Using a Converter.
• Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
• Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.