Radial Bar

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
• Properties
  • Inter-Column Spacing: distance between columns. Unit: pixel.
  • Max. Radian: maximum radian of a circular column, that is, a radian of a circular column whose value is the largest in the radial bar. The radians of other circular columns decrease proportionally according to the values. When this parameter is set to 360, the largest ring-shaped column is displayed as a circle. The unit is degree (°).
  • Inner Radius: radius of the inner circle of a circular column.
  • Outer Radius: radius of the outer circle of a circular column.
  • Start Color: color of the start point of a circular column.
  • End Color: color of the end point of a circular column.
• Text Style
  Figure 2 Text style of a radial bar
  
• Grid Line: to show or hide the grid lines. Figure 3 shows the grid lines.

  Grid Color: color of the grid lines.

  Figure 3 Grid lines of a radial bar
  
• Message: to show or hide the prompt information. After this function is enabled, a message is displayed when you mouse over or click on the screen during the screen preview. You can click in the upper right corner of the page to preview the page.
  • Color: font color of the message.
  • Font Size: font size of the message.
  • Font Width: font width of the message.
• Animation: After this function is enabled, the animation effect of the radial bar is displayed.
  • Duration: duration of the animation when the radial bar is displayed for the first time. Unit: ms.
  • Animation Effect: different animation effects available in the drop-down list.
  • Animate in Order: After the function is enabled, the circular columns of each series are animated in sequence. If this option is deselected, all circular columns are animated at the same time.
  • Duration After Change: animation duration of the circular columns after data is updated. Unit: ms.
    Figure 4 Animation of a radial bar chart
    

Data

For details about how to configure component data, see Configuring Component Data.

Interaction

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