Region Ranking

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
• Global Style
  • Font: text font.
  • Font Size: font size of the text.
  • Color: font color of the text.
  • Icon: to show or hide the icon by clicking or .
  • Icon Size: to set the icon size.
• Column Style
  • Height: height of the column.
  • Quantity: number of the displayed columns.
  • Color: to set the column color by clicking the color editor.

Data

• 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.
• Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
  • area: name of the area.
  • num data.
  • img: custom style name of the icon. This field is optional.

    Click on the right of the img field to add a custom icon style. To delete an added custom style, click on the right of the series.

    To add a custom style, do as follows:

    • Series Value: Enter a value of the img field. If the img field of a region in the source data is the same as the value of this parameter, the icon of the custom style is displayed in the region ranking. If the img field of a region in the source data is not specified or does not match the series value of the custom style, the default icon style is displayed in the region ranking.
    • Icon: to show or hide the icon.
    • Custom Style to set a custom icon. You can click to upload a local icon or click to delete the icon.
      Figure 1 Adding an icon style
      
• 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.