Rising Sun Chart

Chart Style

The sunrise chart is suitable for displaying data at different levels. It can be used to clearly express data with parent-child hierarchical structures based on the pie chart that represents the proportion relationship and the data hierarchy. The sunburst chart is not suitable for data display with too many data categories, negative values, and zero values.

Configuration Panel

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

• Graphics

  Parameter	Description
  Chart Margins	Click the icon to control the display of the chart margins. If you turn on the switch, you can configure the distance between the column chart area and the four boundaries of the widget. Unit: px by default.
  Rising Sun Color	For more information about the colors of pie tiles in a sunburst chart, see Color mapper instructions.
  Decreased transparency	The degree to which the transparency of the rising sun chart child pie blocks is gradually reduced. Valid values: 0 to 1. A larger value indicates a lower transparency. Unit: α.
  Rising Sun Radius	Drag the left and right sliders to control the value of the inner and outer radius of the sunburst chart. Unit: %. When the Automatically Calculate Parent Weight switch is turned on, the weight of the parent node is determined by the child element; when the switch is turned off, the weight of the parent node is determined by the parent node.
  Stroke Style	The stroke line style of the sunburst chart, including the line type, line thickness, and 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.
  Rising Sun Label	The dimension style in the block of the sunburst chart. Click the icon to control the visualization and concealment of the dimension configuration items of the block. Label Field: The label content must correspond to the field content on the Data tab. The label can be name, value, or name+value. By default, the content of the name field is obtained. name: If you select name for the Label field, you can customize the prefix and suffix, or use the ellipsis style. If a character is too long, you can turn on the ellipsis switch. value: If you select value for the label field, you can customize the prefix, suffix, and numeric format. You can also set multiple numeric display formats. name+value: If you select name+value for the label field, you can customize the prefixes and suffixes of the name+value two fields. You can also set the numeric format style and configure multiple types of numeric display formats. Note When two label values are displayed, you can turn on the Fold configuration items to display the label wrap. Relative Offset: The vertical and horizontal offsets of the columns. Unit: pixels. Text Style: the text style of the column label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the column, including the thickness and color of the stroke line.
  Map	The column mapping style. Click the icon to control the visualization of the mapping configuration items. Type: the type of the map, including dot, line and square. Fill Style: Sets the fill style of the map. See the color picker description to configure the map's color style. Stroke Style: Sets the stroke style of the map. See the color picker Notes to configure the map's color style. This field is displayed when you set Type to Point or Square. Extra Styles: Additional styles for the map, including the map's graphic dimensions, graphic spacing, line spacing, rotation and whether on /off.

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

  Parameter	Description
  Animation Switch	Turn on the switch to configure the animation effect of the sunburst chart.
  Animation Effect	The type of the animation. The system provides you with a variety of common animation effects, including Horizontal Growth, Vertical Growth, Zoom and Fading, and Flipping. You can set this parameter only after you turn on Animation.
  Animation Duration	The duration of the widget animation effect. Unit: ms. This parameter is configurable only after you turn on the Animation switch.

• Interactive: the interactive effect style of the Sunburst widget.

  • dialog box: The style of the dialog box that appears when you move the pointer over or click a sunburst tile on the Preview or Publish page. Click the icon to turn the dialog box on or off.

    Parameter	Description
    Trigger Method	The method by which the dialog box is triggered. You can select Hover or Click.
    Title Spacing	The spacing distance value of the dialog box title. Unit: px.
    dialog box Title	dialog box the text content of the title. Click the icon to turn the dialog box title style on or off.
    Title Style	The style of the title text in the dialog box, including the font style, weight, font size, and color.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the configuration content of the currently selected dialog box content display series and add a dialog box content display series with the same configuration. Field Name: the name of the field in the dialog box. The name must match the field in the data panel. Display Name: the display name of the dialog box content. Pre-Suffix: the pre-suffix content of the dialog box content.
    Numeric Format	The numeric format type of the dialog box content. This parameter takes effect only for value field values.
    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 selected status of the sunburst block. You can click the icon to enable or disable the selected status.

    Parameter	Description
    Trigger Method	The method that is used to trigger the sunrise tile. Valuable values include Hover and Click.
    Select Method	The method by which you want to select the sunrise block. You can select Single or Multiple. If you select Single, the click event only throws one piece of data. The data format is an object, and only one sunburst tile can be highlighted. If you select Multiple, the click event throws multiple pieces of data, and the data format is an array, which highlights multiple sunburst tiles.
    Transparency	Select the transparency value of the sunburst block. Valid values: 0 to 1. Unit: α.
    Rising Sun Color	The color of the sunburst block when it is selected. Click the icon to turn the sunburst color style on or off.
    Rising Sun Stroke	The style of the stroke line of the sunburst block, including the type of the stroke line, the thickness of the line, and the color of the stroke line. 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.

• Condition: the description of the data condition style.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to configure the arrangement style of multiple data condition styles. Click the icon to copy the current conditional style configuration and add a conditional style with the same configuration. For more information, see Condition tree usage.

  • Sunburst Color: If you turn on the switch, the color of the sunburst block in the conditional style of this series cannot be configured. If you turn off the switch, the color of the sunburst block in the conditional style of this series cannot be configured.

  • Stroke Style: If you turn on the switch, you cannot configure the stroke style of the sunburst chart in the specified conditional style series. If you turn off the switch, you cannot configure the stroke style of the sunburst chart in the specified conditional style series.

Data tab

Configuration field description

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction tab

Interaction description

Configure interactions in Blueprint Editor

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. In Blueprint Editor, click the Sunburst Graph component in the Import Nodes pane. On the canvas, you can configure the parameters for the Sunburst Graph, as shown in the following figure.

   • Event

     Event	Description
     When the sunrise chart 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 tab in the right-side configuration panel of the canvas editor.
     When the Sunburst Graph API request fails	The event that is returned when a data interface request fails (the request may be due to network problems or interface errors) and is processed by the filter. The event also throws the processed JSON data. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     When a data item is selected	The event that is raised when a tile in a sunburst chart is clicked, along with the data item corresponding to that tile.

   • Action

     Policy Action	Description
     Request a sunrise chart	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 sunrise chart is configured with the API data source as https://api.test and the data passed to the Request Sunrise Chart Interface action is { id: '1'}, the final request interface is https://api.test?id=1.
     Import Sunrise Chart	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 tab in the right-side configuration panel of the canvas editor.
     Highlight	Highlight the element corresponding to the data item. The following example shows the reference data. return { "data": { "x": data.x,// The highlighted data item. "colorField": data.colorField }, "style": { "fillStyle": "#f00"// Fill color } }
     Reset selections	Clear the selection item data of the reset component. No parameters are required.
     Update component configurations	Style configurations of widgets are dynamically updated. In the Configuration panel, click Copy Configuration to Clipboard to obtain the configuration data of the component. After that, change the style field for the data processing node in Blueprint Editor.
     Display	The following example shows the widget. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	The following example shows how to hide a widget: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Switch to the implicit state	The following example shows whether to show or hide a widget. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Move a widget to a specified location. The following example shows the reference data. return{ // 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" } }