Vertical capsule column chart (versions earlier than 3.0)

Settings

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Global settings

  • Font family: The font for all text in the component. The default is Microsoft YaHei.

  • Column style

    • Column spacing: The spacing between columns, ranging from 0 to 1.

    • Outer padding: The horizontal spacing between the outermost columns and the component's borders, ranging from 0 to 1.

    • Capsule padding: The padding between the column and the capsule shell.

    • Border color: The color of the outer capsule border. For more information, see Color picker.

    • Border width: The width of the outer capsule border.

    • Column border color: The border color of the capsule columns.

  • Margin

    • Top: The margin between the top of the columns and the top border of the component.

    • Bottom: The margin between the bottom of the columns and the bottom border of the component.

    • Left: The margin between the leftmost column and the left border of the component.

    • Right: The margin between the rightmost column and the right border of the component.

  • Label: Configures the data labels on the columns. Click the icon to show or hide the labels.

    • Text

      • Font Size: The font size of the label text.

      • Color: The color of the label text.

      • Font Weight: The font weight of the label text.

    • Position: The position of the labels. Options include Top, Center, and Bottom.

    • Show null values: If enabled, labels for data points with a value of 0 are displayed.

  • Max items to load: The maximum number of data records to load for layout, rendering, and calculation. This setting optimizes visualization performance.

• x-axis: Configures the chart's x-axis. Click the icon to show or hide the x-axis.

  • Text

    • Font Size: The font size of the x-axis text.

    • Color: The color of the x-axis text.

    • Font Weight: The font weight of the x-axis text.

  • Axis label: Configures the labels on the x-axis. Click the icon to show or hide the labels.

    • Angle: The display angle of the axis labels. Options include Horizontal, Slanted, and Vertical.

    • Quantity: The maximum number of labels to display on the x-axis.

      Note

      If you set Quantity to 0, the system automatically determines the number of labels based on the component's data.

  • Axis line: Configures the x-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: Configures the grid lines for the x-axis. Click the icon to show or hide the grid lines.

    Color: The color of the grid lines.

• y-axis: Configures the chart's y-axis. Click the icon to show or hide the y-axis.

  • Text

    • Font Size: The font size of the y-axis text.

    • Color: The color of the y-axis text.

    • Font Weight: The font weight of the y-axis text.

  • Axis label: Configures the labels on the y-axis. Click the icon to show or hide the axis labels.

    • Max: Sets the maximum value for the y-axis. You can enter a custom value or select one of the following system options:

      • Maximum data value: Uses the maximum value from the dataset.

      • Automatic rounding: Automatically rounds the maximum axis value based on the data range and the number of axis labels.

    • Quantity: The number of axis labels.

    • Display format: The display format for the axis labels. You can enter a custom format or select a system option. If you select Default, the system displays the data in its original format.

  • Axis unit: Configures the unit for the y-axis. You can enter a custom value. Click the icon to show or hide the axis unit.

  • Axis line: Configures the y-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: Configures the grid lines for the y-axis. Click the icon to show or hide the grid lines.

    Color: The color of the grid lines.

• Legend: Configures the chart legend. Click the icon to show or hide the legend.

  • Text

    • Font Size: The font size of the legend text.

    • Color: The color of the legend text.

    • Font Weight: The font weight of the legend text.

  • Layout: The position of the legend items.

    • Spacing

      • Horizontal Spacing: The horizontal distance between adjacent legend items. This setting is effective only when there are multiple series.

      • Vertical Spacing: The vertical distance between the legend and the top border of the component.

    • Position: The position of the legend within the component. Options include Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

• Tooltip: Configures the tooltip that appears when a user hovers over or clicks a column.

  • Trigger type: Specifies what triggers the tooltip. Options include Data Item and Axis.

  • Trigger action: Specifies the user action that triggers the tooltip. Options include Hover and Click.

  • Disappear delay: The delay in milliseconds (ms) before the tooltip disappears after the trigger action ends.

  • Background box: Configures the tooltip's background.

    • Background Color: The background color of the tooltip.

    • Custom Size: The width and height of the tooltip in pixels (px).

    • Padding: The internal padding of the tooltip in pixels (px).

    • Horizontal Offset: The horizontal offset of the tooltip relative to the mouse pointer in pixels (px).

    • Vertical Offset: The vertical offset of the tooltip relative to the mouse pointer in pixels (px).

    • Border color: The border color of the tooltip.

    • Border width: The thickness of the tooltip border in pixels (px).

  • Text style: Configures the text in the tooltip.

    • Color: The color of the tooltip text.

    • Font family: The font family of the tooltip text.

    • Font Size: The font size of the tooltip text.

    • Font Weight: The font weight of the tooltip text.

  • Axis pointer: Configures the axis pointer, which appears when the tooltip's trigger type is set to Axis.

    • Type: The type of the axis pointer. Only Line is supported.

    • Indicator line style: The color, width, and type of the indicator line. Type options include Solid, Dashed, and Dotted.

• Series: Click the or icon to add or delete a data series.

  • Series name: The name of the data series. You can specify a custom name. If left empty, the component uses the value of the s field from the data as the series name. If you specify a name, you must ensure the data is returned in the correct order.

  • Color: The color of the columns in this series.

• Animation: Configures the column animation. Click the icon to enable or disable the animation.

  • Initial animation duration: The duration of the initial rendering animation in milliseconds (ms).

  • Easing: The easing effect for the animation. You can select from various common easing effects.

  • Animate series sequentially: If enabled, the animations for each series play in sequence. If disabled, all column animations play simultaneously.

  • Update animation duration: The duration of the animation when the component data is updated, in milliseconds (ms).

  • Start from previous position: If enabled, when the component data is updated, the animation starts from the previous data position. If disabled, the animation starts from the initial position.

Data

[
  {
    "x": "Inner Mongolia",
    "y": "375",
    "s": "1"
  },
  {
    "x": "Inner Mongolia",
    "y": "180",
    "s": "2"
  },
  {
    "x": "Inner Mongolia",
    "y": "200",
    "s": "3"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "1"
  },
  {
    "x": "Zhejiang",
    "y": "100",
    "s": "2"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "3"
  },
  {
    "x": "Liaoning",
    "y": "25",
    "s": "1"
  },
  {
    "x": "Liaoning",
    "y": "125",
    "s": "2"
  },
  {
    "x": "Liaoning",
    "y": "100",
    "s": "3"
  },
  {
    "x": "Jilin",
    "y": "190",
    "s": "1"
  },
  {
    "x": "Jilin",
    "y": "110",
    "s": "2"
  },
  {
    "x": "Jilin",
    "y": "170",
    "s": "3"
  },
  {
    "x": "Heilongjiang",
    "y": "90",
    "s": "1"
  },
  {
    "x": "Heilongjiang",
    "y": "60",
    "s": "2"
  },
  {
    "x": "Heilongjiang",
    "y": "70",
    "s": "3"
  },
  {
    "x": "Anhui",
    "y": "240",
    "s": "1"
  },
  {
    "x": "Anhui",
    "y": "170",
    "s": "2"
  },
  {
    "x": "Anhui",
    "y": "280",
    "s": "3"
  },
  {
    "x": "Fujian",
    "y": "420",
    "s": "1"
  },
  {
    "x": "Fujian",
    "y": "190",
    "s": "2"
  },
  {
    "x": "Fujian",
    "y": "390",
    "s": "3"
  }
]

Interaction

Select Enable to activate the component's interaction features. Clicking a column triggers a data request and passes a callback value, which allows you to load data dynamically. By default, the component passes the x, y, and s values from the data. For specific configurations, see Configure a component callback ID.

Blueprint Editor interaction

1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Capsule Column Chart component in the Added Nodes pane. The configuration parameters for the component appear on the canvas.

   • Events

     Event	Description
     When the Capsule Column Chart API request is complete	This event triggers after the component receives and processes data from an API request. It passes the processed data in JSON format. For details about the data format, see the Data section.
     When a data item is clicked	This event triggers when a user clicks a column. It passes the data for the clicked column.

   • Actions

     Action	Description
     Request data for the Capsule Column Chart	Re-requests data from the server. It uses data from upstream data processing nodes or layer nodes as parameters for the request. For example, if the Capsule Column Chart is configured with an API data source of http://api.test, and the data passed to the Request data for the Capsule Column Chart action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data for the Capsule Column Chart	Processes the data according to the component's rendering format, imports the data, and redraws the component. This action does not re-request server-side data. For details about the data format, see the Data section.
     Highlight	Highlights the element corresponding to a data item. The following code shows a sample parameter: { data: { x: 'Shanghai' // You can specify multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Clear highlight	Clears the highlight from the element corresponding to a data item. The following code shows a sample parameter: { data: { x: 'Shanghai' }, options: { mode: 'single' // If set to 'single', only one highlight is cleared when multiple data items match. If set to 'multiple', all matching highlights are cleared. } }
     Update component configuration	Dynamically updates the component's style configuration. To get the configuration data, click Copy Configuration to Clipboard in the component's Settings panel, and then use a data processing node on the Blueprint Editor page to modify the configuration.
     Show	Shows the component. No parameter is required.
     Hide	Hides the component. No parameter is required.
     Toggle visibility	Toggles the component's visibility.
     Move	Moves the component to a specified position. { // The movement type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Options include: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }