DocsICP FilingConsole
官方文档
首页

percentage-column-charts

更新时间：
复制 MD 格式
产品详情
我的收藏

Each configuration item of the percentage column chart is described when you select Full.

Chart style

The percentage column chart automatically displays the percentage of multiple data categories based on the data series, highlighting the differences in the percentage of each series. image.png

Style Panel image.png

  • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis of the component, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • 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.

    • Click the imageicon to flip the widget style.

    • Click the imageicon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget, and a value of 1 fully displays it. Default value: 1.

  • Graphics

    Parameter

    Description

    Chart Margins

    Click the 开关图标icon to toggle the chart margins. When enabled, you can set the distance between the column chart area and each boundary of the widget. Unit: px by default.

    Column Width

    The width of the column, in px.

    Column color

    The color of the column. For more information, see Use the color mapper.

    Pillar glow

    The lighting style of the column. Click the 开关图标icon to toggle the column lighting settings.

    • Luminous Color: Includes a synchronized column switch and opacity. When synchronous column is turned off, the luminous color can be set separately.

    • Ambiguity Coefficient: The ambiguity coefficient of the column light. Valid values: 0 to 50. A larger value produces a more diffused light range between columns.

    • Shadow Offset: The horizontal and vertical shadow offsets of the column light, in px.

    Column Label

    The label style of the column. Click the 开关图标icon to toggle the label settings.

    • Label Field: The label field content must match the field on the Data tab. By default, the y field value is used.

    • Pre-Suffix: the prefix and suffix of the column label.

    • Label Position: The position of the label. Valid values: Top, Middle, and Bottom.

    • Relative Offset: the vertical and horizontal offsets of the column labels, in pixels.

    • Text Style: the text style of the column label, including the font style, weight, font size, and color.

    • Text Stroke: the stroke style of the column, including the thickness and color of the stroke.

    Map

    The map style of the column. Click the 开关图标icon to toggle the map settings.

    Note

    The background of the map does not support gradient color.

    • Type: the type of the sticker. Valid values: Point, Line, Square, and Image.

    • Fill Style: the fill style of the texture map. See the color picker instructions to configure the color style of the map.

    • Stroke Style: Specify the stroke style of the map. See the color picker instructions to configure the color style of the map. This parameter is displayed when you set Type to Dot or Square.

    • Extra Style: Other styles of the map, including Graphics Size, Graphics Spacing, Line Spacing, Rotation Angle, and Stagger. If you set Type to Image, you can set Image Address, Tile Width, Tile Height, Tile Spacing, and Rotation Angle.

  • Coordinates: the x-axis and Y axes of the widget.

    • X-axis

      • x-axis Display: Turn on the switch to show the x-axis style in the widget. Turn off the switch to hide it.

      • Data Type: the type of the x-axis data. Valid values: Number, Category, and Time.

      • Display Range: the minimum and maximum display range of x-axis data. Available only when Data Type is set to Numerical.

        Parameter

        Description

        Minimum Runtime Duration

        The minimum value of the x-axis. Enter a custom value, or select Minimum Value to use the minimum value in the data.

        Maximum Runtime Duration

        The maximum value of the x-axis. Enter a custom value, or select Data Max to use the maximum value in the data.

      • Axis: the x-axis style, including the line shape, thickness, and style. Click the 开关图标icon to toggle the x-axis style.

      • Axis Title: the x-axis title style. Click the 开关图标icon to toggle the x-axis title.

        Parameter

        Description

        Title Display

        The text content of the axis title display.

        Display mode

        The display mode of the axis title, including the angle value of the title and the offset value of the title.

        Text Style

        The font style, text weight, font size, and color of the axis title text.

      • Axis Label: the x-axis label style. Click the 开关图标icon to toggle the x-axis label.

        Parameter

        Description

        Display Format

        The display format of the x-axis label value. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information, see Data display formats. Available only when Data Type is set to Numeric.

        End Spacing

        The distance between the x-axis label and the two ends of the axis, in %.

        Label Display

        The display style of the label, including the number of axis labels, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.

        Text Style

        The font style, text weight, font size, and color of the axis label text.

      • Tick mark: the x-axis tick mark style, including the length, thickness, and color. Click the 开关图标icon to toggle the x-axis tick mark style.

      • Gridline: the x-axis gridline style, including the line style, thickness, color, length, and spacing. Click the 开关图标icon to toggle the x-axis gridline.

    • Y-axis

      • Y-Axis Display: Turn on the switch to show the Y-axis in the widget. Turn off the switch to hide it.

      • Axis: the Y-axis style, including the shape, thickness, and style of the line. Click the 开关图标icon to show or hide the Y-axis style.

      • Axis Title: the Y-axis title style. Click the 开关图标icon to show or hide the Y-axis title.

        Parameter

        Description

        Title Display

        The text content of the axis title display.

        Display mode

        The display mode of the axis title, including the angle value of the title and the offset value of the title.

        Text Style

        The font style, text weight, font size, and color of the axis title text.

      • Axis Label: the Y-axis label style. Click the 开关图标icon to show or hide the Y-axis label.

        Parameter

        Description

        Display Format

        The display format of the Y-axis label. Valid values: Default, 11 (integer), 11.1 (floating-point), 11.11 (floating-point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats.

        End Spacing

        The distance between the two ends of the Y-axis label from the axis, in %.

        Label Display

        The display style of the label, including the number of axis labels, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.

        Text Style

        The font style, text weight, font size, and color of the axis label text.

      • Tick mark: the Y-axis tick mark style, including the length, thickness, and color. Click the 开关图标icon to show or hide the Y-axis tick marks.

      • Gridlines: the Y-axis gridline style, including the line style, weight, color, length, and spacing. Click the 开关图标icon to show or hide the gridlines.

  • Animation: the animation effect style of the column chart.

    • Animation: The animation style of the chart. Click the 开关图标icon to enable or disable the animation.

      • Animation Effect: the animation effect type. Available effects include Zoom, Move, Horizontal Growth, and Vertical Growth.

      • Animation Duration: the duration of the animation effect, in ms.

    • Sweep Animation: The sweep animation style of the chart. Click the 开关图标icon to enable or disable the sweep animation.

      Important

      After the current animation is enabled, interactive features such as Selected become invalid.

      • Highlight Style: The highlight height and intensity of the sweep animation.

      • Dynamic Effect: The animation duration and gap of the sweep animation, in ms.

  • Interactive: the interactive effect style of the column chart.

    • Carousel: After you enable the carousel feature, the dialog box settings are applied and the dialog box is no longer triggered by interactions. Click the 开关图标icon to display or hide the carousel effect.

    • dialog box: The style of the dialog box that appears when you move the pointer over or click the column chart on the preview or publish page. Click 开关图标the icon to turn the dialog box on or off.

      Parameter

      Description

      Trigger

      The method by which the dialog box is triggered. You can select Hover or Click.

      Display Position

      The position style of the dialog box display. Valid values: Top, Bottom, Left, and Right.

      Title Spacing

      The spacing between titles in the dialog box. Unit: px.

      Title Text

      The style of the title text in the dialog box, including the font style, text weight, font size, and color.

      Content Spacing

      The spacing between the text of the dialog box content. Unit: px.

      Content Text

      The style of the content text in the dialog box, including the font style, text weight, font size, and color.

      Pop-up background

      dialog box pop-up background style.

      • Background Margin: dialog box the horizontal and vertical margins of the pop-up background.

      • Background Color: The background color of the dialog box.

      • Border Style: dialog box the style of the border, including the border line type, rounded corner size, line width size, and border line color.

      Axis indicator

      The style of the dialog box axis indicator line, including the axis indicator line type, thickness value, and axis indicator line color. Click the 开关图标icon to turn the axis indicator on or off.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

      Activate a range

      dialog box the style of the active area, including additional values for the fill color, transparency, and width adjustment of the area style.

    • Connected Area: the style of the connected area between columns of different categories and the same series of data. It can be triggered by hovering or clicking. Click the 开关图标icon to control the display of the connected area configuration items.

    • Selected: the selected column. You can click the 开关图标icon to enable or disable the selected column.

      Important

      When the Sweep Animation feature is enabled, the selected feature is disabled.

      Parameter

      Description

      Trigger

      The trigger mode of the selected column. Valid values: Hover and Click.

      Select Method

      The method by which you want to select a column. You can select one or more columns.

      Column color

      The color of the column in the selected state.

      Pillar Stroke

      The stroke line style of the column, including the stroke line type, line thickness, and stroke line color.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

    • Interaction Enhancement: The data interaction enhancement mode for handling large amounts of column chart data. Click the 开关图标icon to enable or disable this mode.

      Important

      When Sweep Animation is enabled, the interaction enhancement feature is disabled.

      Parameter

      Description

      How to run the commands

      The mode of data interaction. Valid values: Thumbnail Axis and Scroll Bar.

      Note

      The time data type. You cannot use the feature to interact with large amounts of data.

      Default Range

      The range of data displayed on the thumbnail axis, from 0 to 1. Displayed only when the thumbnail axis style is enabled.

      Rail Style

      The style of the thumbnail axis slider, including height, foreground color, and background color. Displayed only when the thumbnail axis style is enabled.

      Text Style

      The text style on the thumbnail axis, including font, weight, font size, and color. Displayed only when the thumbnail axis style is enabled.

      Handle Style

      The handle style at both ends of the thumbnail shaft, including the width and height values of the handle, the default color and highlight color of the handle background, the corner value of the handle edge, and the edge color.

      Note

      This option is available only when the Thumbnail style is enabled.

      Roller Width

      The width of the scroll bar, in pixels.

      Note

      This option is available only when the Scrollbar style is enabled.

      Roll bar color

      The color of the scroll bar, including the foreground color and background color of the scroll bar.

      Note

      This option is available only when the Scrollbar style is enabled.

  • Legend: the legend style of the column chart.

    Parameter

    Description

    Legend Switch

    Turn on the switch to configure the legend style. Turn off the switch to disable legend configuration.

    Legend Position

    The position of the legend relative to the start coordinates of the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.

    Text Style

    The font style, text weight, font size, and color of the legend text.

    Category Legend

    The style of the sub-type legend.

    • Legend Marker: the size and shape of the legend marker.

    • Legend Spacing: the horizontal and vertical distance between the legends of different categories.

    • Maximum Width: Specify the maximum width of the legend. Unit: pixels.

    • Paging Allowed: Turn on the switch to enable legend paging. You can configure the page number style and arrow style when there are too many legends. Turn off the switch to display all legends on one page.

      • Page Style: the style of the page number, including the font, weight, font size, and color of the page number.

      • Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

  • Dimension: the description of the dimension style.

    • Auxiliary Line: Click the imageor imageicon on the right to add or delete an auxiliary line series. Click the imageor imageicon to configure the arrangement style of multiple guide line series. Click the imageicon to copy the currently selected auxiliary line series configuration and add an auxiliary line series with the same configuration.

      • Type: the type of the auxiliary line, including horizontal lines and slashes.

      • Data Value: the data values of auxiliary lines, including the average line, median line, maximum line, and minimum line.

      • Linetype Style: the linetype style of the auxiliary line, including the linetype, thickness, length, spacing, and color of the auxiliary line.

      • Text: specifies the content style of the guide line, including the text, data display switch, rotation angle, horizontal and vertical offset, and alignment position.

      • Text Background: specifies the background of the guide line, including the color of the background and the radius of the rounded corner.

      • Text Style: the text style of the guide line.

    • Auxiliary Frame: Click the imageor imageicon to add or delete an auxiliary frame series. Click the imageor imageicon to configure the arrangement style of multiple auxiliary frame series. Click the imageicon to copy the auxiliary frame series configuration and add an auxiliary frame series with the same configuration.

      • End Point Position: Set the start time horizontal /y-axis of the auxiliary frame and the horizontal /y-axis of the end point.

      • Background Fill: Set the background color of the auxiliary frame.

      • Line Style: the line style of the auxiliary frame, including the line type, weight, length, spacing, and color of the auxiliary frame.

      • Area Coloring: Set the area coloring value of the auxiliary frame series. If you turn on Sweep Animation or Column Background Color, this parameter becomes invalid.

      • Text: Set the content style of the auxiliary frame, including the text, horizontal and vertical offset, rotation angle, and display position.

      • Text Background: Set the background of the auxiliary frame, including the color of the background and the radius of the rounded corners.

      • Text Style: the text style of the auxiliary frame.

    • Column Style: Click the imageor imageicon to add or delete a conditional style. Click the imageor imageicon to configure the arrangement style of multiple conditional styles. Click the imageicon to copy the current conditional style configuration and add a conditional style with the same configuration. For more information about how to configure conditional patterns, see Use conditional trees.

      • Column Color: If you turn on the switch, you cannot configure the column color in the condition style. If you turn off the switch, you cannot configure the column color in the condition style.

      • Text Labeling: the style of text labeling under the current conditions.

        • Text Content: specifies the text annotation content.

        • Offset: the horizontal and vertical offsets of the text annotation. Unit: pixels.

        • Orientation: the orientation of the text annotation relative to the text annotation point, including top, right, bottom, and left.

        • Text Background: specifies the background of the text annotation, including the color of the background and the radius of the rounded corners.

        • Text Style: the text style of the text content.

        • Text Line: specifies the line style of the text annotation, including the line type, color, weight, and length.

        • Text Label Point: Set the Fill Color and Radius of the text label point.

          Note

          The stroke style is the same as the line style.

Data Sources panel image.png

Column

Description

x

Configures the category of each column, corresponding to the x-axis value.

y

Configures the value of each column, corresponding to the y-axis value.

colorField

Optional. The color mapping field, which maps column colors to data values.

Configure data items

Description

Data sources

Use the code editor or visual editor to view the data fields in the widget. You can also modify the data type to flexibly configure component data.

Data Mapping

To customize chart field configurations, set different field mappings in the Data Mapping module to map content to the corresponding widget fields. This matches data without modifying the data source fields. You can also click the imageicon to configure the field style.

Configure a filter

Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

Data Response Result

The Data Response Result section displays widget data in real time. When the data source changes, the latest data is shown. If the response is delayed, click the imageicon to view the data response result, or click the imageicon to fetch the latest data. You can also click View Example to view a response result example.

Forbid Loading

Select the check box to hide the loading indicator during component initialization when you update and preview the data dashboard. Clear the check box to show it. Cleared by default.

Controlled Mode

Select the check box to prevent the component from requesting data at initialization. Data is requested only through global variables or methods configured in Blueprint Editor. Clear the check box to allow automatic data requests. Cleared by default.

Auto Data Request

Select the check box and enter a polling interval to enable dynamic data polling. Clear the check box to disable automatic updates — you must then manually refresh the page or use Blueprint Editor and global variable events to trigger data requests.

Advanced Panel image.png

Interaction

Description

When a data item is selected

Turn on the switch to enable the widget interaction feature. The percentage bar chart widget has interactive configurations. When you click to select a data item, a temporary variable is thrown. By default, the x and y fields in the data are thrown. For more information, see Component interaction configuration.

When the legend is clicked

Turn on the switch to enable the widget interaction feature. The percentage histogram widget has interactive configurations. When a legend is clicked, it throws temporary variables. By default, the value and checked fields in the data are thrown. For more information, see Component interaction configuration.

Blueprint Interaction

  1. Click the imageicon in the upper-left corner to go to the Blueprint page.

  2. On the Layer Nodes tab, add the widget to the main canvas.

  3. View blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When the percentage bar chart interface request is completed

      The event is triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.

      When a data item is selected

      The event that is raised when a column of the percentage bar chart is clicked, and the data item corresponding to the column is also raised.

      When the legend is clicked

      The event that is raised when the legend of a percentage bar chart is clicked, and the data item corresponding to the bar is also raised.

    • Action

      Action

      Description

      Import Percentage Histogram API

      After widget data is processed into the required drawing format, it is imported for redrawing without re-requesting server data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.

      Request Percentage Histogram API

      This action re-requests server data, using data sent by an upstream data processing node or layer node as a parameter. For example, if the API data source is https://api.test and the data passed to Request Percentage Histogram API is { id: '1'}, the final request URL is https://api.test?id=1.

      Highlight

      data: the data item to be highlighted.

      • Single highlight

        {
  x: 'Shanghai',
  y: 100
}

      • Bulk Highlight

        [
  {
    x: 'Shanghai', 
    y: 100}, 
  {
    x: 'Shenzhen', 
    y: 75
  }
]

      style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used.

      Reference data example

      {
  "data": {},
  "style": {}
}

      Reset selections

      Clear the selection item data of the reset component. No parameters are required.

      Move

      Move the widget to a specified location. See the data example.

          {      
      // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
        "positionType": "to",
      // The location, which is indicated by the x and y coordinates. 
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation type. 
      "animation": {
        "enable": false,
        // The animation delay. Unit: milliseconds. 
        "animationDuration": 1000,
        // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
        "animationEasing": "linear"
      }
    }

      Switch Display /Hide

      Specifies whether to show or hide a widget. No parameters are required.

      Display

      Display the widget. See the data example.

      {
  "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

      Hide

      Hide the component. See the data example.

      {
  "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

      Update component configurations

      Dynamically update widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.
Previous：Column ChartNext：range-column-charts