Zebra column chart (versions earlier than v3.0)

Configuration

• 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.
• Dimensions: The width and height of the component in pixels (px). You can click to lock the aspect ratio to resize the component proportionally. Click the icon again to unlock it and freely change the width and height.
• Position: The x-coordinate and y-coordinate of the component in pixels (px). The x-coordinate is the distance from the component's upper-left corner to the left edge of the page. The y-coordinate is the distance from the component's upper-left corner to the top edge of the page.
• Rotation: Rotates the component around its center point, in degrees (°).
  • Manually enter a value to set the rotation angle.
  • Drag the black dot within the icon to adjust the rotation angle.
  • Click the icon to flip the component horizontally.
  • Click the icon to flip the component vertically.
• Opacity: Specifies the transparency of the component, on a scale from 0 to 1. A value of 0 makes the component completely transparent (hidden), while a value of 1 makes it fully opaque. The default is 1.

• Global style

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

  • Column Style

    • Column spacing: The space between columns. Values range from 0 to 1.

    • Outer padding: The space between the outermost columns and the left and right borders of the component. Values range from 0 to 1.

    • Stroke width: The thickness of each horizontal line (zebra stripe).

    • Line spacing: The distance between each horizontal line (zebra stripe).

  • Margin

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

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

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

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

  • Value label: The style of the value label for each column. Click the icon to show or hide the value labels.

    • Text

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

      • Color: The color of the value label text.

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

    • Show Null Values: When enabled, shows labels for data points with a value of 0.

  • Load limit: The maximum number of data records the system loads for layout, rendering, and calculation. This setting helps ensure application performance.

• X-axis: The style of the 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: The style of 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 Quantity is set to 0, the system automatically determines the number of labels to display based on the component's data and available space.

  • Axis line: The style of the x-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: The style of 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: The style of the 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: The style of the labels on the y-axis. Click the icon to show or hide the axis labels.

    • Min Value: The minimum value for the y-axis. You can enter a custom value or select one of the following options:

      • Data Minimum: Uses the minimum value from the data.

      • Automatic rounding: The system automatically calculates a rounded value based on the data's maximum and minimum values, and the number of axis labels.

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

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

      • Automatic rounding: The system automatically calculates a rounded value based on the data's maximum and minimum values, 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-provided option. When set to Default, the system displays data in its original format.

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

  • Axis line: The style of the y-axis line. Click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid lines: The style of 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: The style of 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 option is only available for charts with multiple series.

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

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

• Tooltip: The style of the tooltip that appears when you hover over or click a column in the preview or published application.

  Figure 1. Tooltip panel

  Figure 2. Tooltip example

  • Trigger Type: The element that triggers the tooltip. Options are Data Item and Axis.

  • Trigger Action: The user action that triggers the tooltip. Options are Hover and Click.

  • Hide Delay: The delay in milliseconds (ms) before the tooltip disappears after the trigger is no longer active.

  • Background Style: The style of the tooltip's background container.

    • Background Color: The background color of the tooltip.

    • Custom Background 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 border thickness of the tooltip in pixels (px).

  • Text Style: The style of the text within the tooltip.

    • Color: The color of the tooltip text.

    • Font: 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: The style of the axis pointer that is displayed when the trigger type for the tooltip is axis and a trigger action is performed.

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

    • Indicator Line Style: The color, width, and type of the pointer 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, which you can customize. If this field is empty, the system uses the value of the s field from the data as the series name. If you specify a custom name, ensure the data is returned in the correct order for each series.

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

• Animation: The animation style for the chart. Click the icon to enable or disable the animation.

  • Initial animation duration: The duration of the animation when the component first renders, in milliseconds (ms).

  • Easing: Choose from several common easing effects.

  • Animate series sequentially: When enabled, columns from different series animate in sequence. When disabled, all columns animate simultaneously.

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

  • Update from previous position: When enabled, the update animation starts from the previous data position when the component's data is updated. When disabled, the animation starts from the initial position.

Data

[
  {
    "x": "Inner Mongolia",
    "y": 120
  },
  {
    "x": "Zhejiang",
    "y": 200
  },
  {
    "x": "Liaoning",
    "y": 25
  },
  {
    "x": "Jilin",
    "y": 190
  },
  {
    "x": "Heilongjiang",
    "y": 90
  },
  {
    "x": "Anhui",
    "y": 240
  },
  {
    "x": "Fujian",
    "y": 420
  }
]

Interaction

Select Enable to activate the component's interactive features. When you click a column in the Zebra Column Chart, it triggers a data request and emits a callback value to dynamically load data. By default, the x, y, and s values from the data are emitted. For configuration details, see Configure 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 Zebra Column Chart component in the imported nodes panel. The component's configuration parameters appear on the canvas, as shown in the following figure.

   • Event

     Event	Description
     On data fetched	Triggered after a data API request is complete and any filters have processed the response. It emits the processed data in JSON format. For a data example, see the Data section.
     On click data item	Triggered when a column in the chart is clicked. It emits the data for the clicked column.

   • Action

     Action	Description
     Request data	Re-requests data from the server. Data emitted from upstream data processing nodes or layer nodes are used as request parameters. For example, if the chart's API data source is http://api.test and the data passed to the Request Data action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data	Imports pre-formatted data and redraws the chart. This action does not require a server request. For the required data format, see the Data section.
     Highlight	Highlights the chart element corresponding to a data item. The following code shows a sample parameter. { data: { x: 'Shanghai' // You can list multiple conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Cancel highlight	Removes the highlight from the chart element corresponding to a data item. The following code shows a sample parameter. { data: { x: 'Shanghai' }, options: { mode: 'single' // When 'single', only one item is unhighlighted if multiple items match. When 'multiple', all matching items are unhighlighted. } }
     Clear component	Clears the component's data. No parameters are required.
     Update component configuration	Dynamically updates the component's style configuration. First, copy the component's configuration data by clicking Copy Configuration to Clipboard in the component's Configuration panel. Then, in a data processing node within the Blueprint Editor, modify the relevant style field values.
     Show	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.
     Toggle visibility	Toggles the component's visibility.
     Move	Moves the component to a specified position. { // Movement type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // Target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Animation easing function. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }