DocsICP FilingConsole
官方文档
首页

3D-column-charts

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

Configure the style, axes, animations, interactions, and data settings of a 3D column chart widget.

Chart style

A 3D column chart displays data differences between and within categories from a three-dimensional perspective, with support for different projection methods, interactions, and special effects. image.png

Style Panel image.png

  • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

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

  • Graphics

    Parameter

    Description

    Projection mode

    The projection mode of the chart. Valid values: Perspective projection and Orthogonal projection.

    Chart size

    The width, height, and depth of the chart in the 3D scene. Adjust these with the distance configuration for optimal display size.

    Angle of View Rotation

    The center point around which the chart view rotates.

    Center Point

    The rotation angle of the chart in the horizontal and vertical directions.

    Chamfer

    The chamfer of the chart columns, including size and smoothness. Unit: px.

    column chart color

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

    Column callout

    The label style of the column. Click the 开关图标icon to control the visibility of the label configuration items of the column.

    • Label Field: The content of the label must match the content of the field on the Data tab. By default, the content of the z field is retrieved.

    • Value Format: Specify the value format of the 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. This parameter is displayed only when you select z for the label field.

    • Prefix and Suffix: Specify the prefix and suffix of a column.

    • Offset: the distance between the column label and the graph. Unit: pixels.

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

  • Coordinate Axis: The coordinate axes of a widget include the x-axis, y-axis, and z-axis.

    • X-axis

      • x-axis Display: If the switch is turned on, the x-axis style in the widget is visible. If the switch is turned off, the x-axis style in the widget is invisible.

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

      • Axis: the x-axis style of the column chart, including the line type, line thickness, and line color. You can click 开关图标the icon to display or hide the x-axis style.

      • Axis Title: the column chart x-axis title style. You can click the 开关图标icon to control the display of the x-axis title.

        Parameter

        Description

        Title Display

        x-axis the text content of the axis title display.

        Offset

        x-axis the offset value of the axis title.

        Text Style

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

      • Tick mark: the x-axis tick mark style of the column chart, including the length, thickness, and color of the tick mark. You can click 开关图标the icon to control whether to x-axis tick mark style.

      • Axis Label: the x-axis label style of the column chart. You can click 开关图标the icon to control the display of the x-axis label.

        Parameter

        Description

        Label Display

        The display style of the label, including the number of labels on the x-axis, the prefix and suffix of the label, and the offset of the label.

        Text Style

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

      • Indicator Line: column chart x-axis indicator line style. You can click 开关图标the icon to control the appearance and concealment of x-axis indicator line.

        Parameter

        Description

        Line Style

        x-axis indicates the line thickness and color of the line.

        Text Style

        x-axis the font style, text weight, font size, and color of the indicator line text.

        Spacing

        x-axis indicates the spacing of the label from the center point.

      • Gridline: the style of the column chart x-axis gridline, including the line style, thickness, and color of the gridline. You can click the 开关图标icon to control the visibility of the x-axis gridline.

    • The Y-axis style is the same as that of the x-axis. For more information, see x-axis style configuration.

    • Z-axis

      • Z-Axis Display: If you turn on the switch, the Z-Axis display is visible. If you turn off the switch, the Z-Axis display is invisible.

      • Display Range: the display range of the minimum and maximum values in the Z-axis.

        Parameter

        Description

        Minimum Runtime Duration

        The minimum value of the Z-axis. You can specify a custom value. You can also select Minimum Value to obtain the minimum value in the data.

        Maximum Runtime Duration

        The maximum value of the Z axis. You can specify a custom value. You can also select Maximum Value to obtain the maximum value in the data.

      • Axis: the Z-axis style of the column chart, including the line type, line thickness, and line color. You can click 开关图标the icon to control the display of the Z-axis style.

      • Axis Title: the title style of the column chart Z axis. You can click 开关图标the icon to control the display of the Z axis title.

        Parameter

        Description

        Title Display

        The text content of the Z-axis title display.

        Offset

        The offset value of the Z axis title.

        Text Style

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

      • Tick Mark: column chart Z-axis tick mark style, including the length, thickness, and color of the tick mark. You can click 开关图标the icon to control whether the Z-axis tick mark style appears or not.

      • Axis Label: the column chart style of the axis label. You can click the 开关图标icon to display or hide the axis label.

        Parameter

        Description

        Display Format

        The display format of the Z-axis label value. You can select 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.

        Label Display

        The display style of the label, including the number of labels on the Z axis, the prefix and suffix of the label, and the offset of the label.

        Text Style

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

      • Indication Line: column chart Z-axis indication line style. You can click 开关图标the icon to control the display and concealment of the Z-axis indication line.

        Parameter

        Description

        Line Style

        The Z-axis indicates the line thickness and color of the line.

        Text Style

        The Z-axis indicates the font style, text weight, font size, and color of the line text.

        Spacing

        The Z axis indicates the spacing of the labels from the center point.

      • Gridlines: the style of the column chart Z-axis gridlines, including the line style, thickness, and color of the gridlines. You can click the 开关图标icon to control the display or concealment of the Z-axis gridlines.

  • Animation: The direction of the column chart's self-rotation.

    • Rotation Direction: the rotation direction of the column chart, including counterclockwise and clockwise.

    • Autobiography Speed: The rotation speed of the column chart, in ms.

  • Interaction

    • Mouse: The column chart interacts with the mouse.

      • Horizontal Rotation: Sensitivity of horizontal rotation of the column chart when the mouse is clicked.

      • Vertical Rotation: Sensitivity of vertical rotation of the column chart when the mouse is clicked.

      • Zoom: The sensitivity of the column chart to zoom when the mouse is clicked.

      • Motion Inertia: the hysteresis factor when the mouse rotates and scales. If the value is greater than 0, the viewing angle will continue to move (rotate and scale) due to certain inertia after the mouse stops operating.

    • 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 trigger method for the dialog box. Valid values: Hover and Click.

      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, weight, font size, and color.

      Content Display

      This field is displayed when you set Mode to Common. Click the imageor imageicon on the right to add or delete a dialog box content series. Click the imageor imageicon to configure the arrangement style of multiple dialog box content display series. Click the imageicon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration.

      • Field Name: the name of the field in the dialog box content. The name must match the field in the data panel.

      • Display Name: the display name of the dialog box content.

      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.

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

  • UI page

    Parameter

    Description

    Legend Switch

    Click the 开关图标icon to turn the legend style on or off.

    Direction

    The display orientation of the legend, including horizontal and vertical.

    Horizontal Alignment

    The horizontal alignment of the legend, including left, center, and right.

    Vertical Alignment

    The vertical alignment of the legend, including top, center, and bottom.

    Reverse

    Reverses the legend icon.

    Text Style

    Displays the font, text weight, font size, and color of the legend text.

    Dimension

    Specifies the mapping of dimensions, including the X, Y, and Z axes.

    Legend Type

    The display type of the legend, including classification and continuous.

    Category Legend

    The type of the legend. This field is displayed only when you set the Legend Type field to Category.

    • Legend Mark: the shape, width, and height of the legend mark.

    • Legend Spacing: the interval between legends. Includes inter-group spacing and intra-group spacing.

    • Splits: the number of splits in the legend.

    Continuous Legend

    This parameter is displayed when you set the Legend Type parameter to Continuous.

    • Rail Size: Sets the width and height of the rail.

    • Slider Max Value: Set the minimum and maximum values of the slider.

  • Special Effects

    Parameter

    Description

    Light and Shade

    The shading effect for 3D graphics. Options: color only, or shading effects.

    Lighting effect

    Shown when you select Shading Effect.

    • Primary light source: Set the light intensity, light color, horizontal and vertical rotation of the light source, projection, and shadow quality.

    • Ambient Light: Set the light intensity and color of the ambient light.

    Late Effect

    • Highlight: Sets the intensity of the glow.

    • Depth of Field: Set the depth of field and blur radius.

      Note

      Size: the F value of the lens. A smaller value indicates a shallower depth of field.

Data Sources panel image.png

Column

Description

x

The category of each column, mapped to the x-axis.

y

The value of each column, mapped to the y-axis.

z

The value of each column on the z-axis.

Configure data items

Description

Data sources

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

Data Mapping

If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. 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. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

Forbid Loading

If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

Controlled Mode

If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

Auto Data Request

Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

Advanced Panel image.png

When Data Item is selected: enables the widget interaction feature. When you click a column of a 3D column chart, a data request is triggered to throw a variable to dynamically load the data of different columns. By default, the x, y, and z values in the data are displayed. 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 3D histogram interface request is completed

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

      When a data item is clicked

      The event that is thrown when a column of a 3D bar chart is selected. The event also throws the data item corresponding to the column.

    • Action

      Action

      Description

      Import 3D Histogram Interface

      After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

      Request a 3D histogram

      This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is set to https://api.test and the data passed to the Request 3D Histogram API is set to { id: '1'}, the final request interface is https://api.test?id=1.

      Move

      Move a widget to a specified location. For more information, 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 duration in which animation is displayed. 
        "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. For more information, see 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. For more information, see 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

      Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.

Previous：stripe-column-chartNext：trapezoidal-column-chart