interval-column-graphs-DataV(DataV)-阿里云帮助中心

This topic describes the chart style and configuration panel of a column chart in a mobile widget.

Chart style

An interval column chart is a type of column chart in the mobile widget. It allows you to obtain the range between the minimum and maximum values of data and display the data styles of column chart in different categories. This helps you clearly display the differences in the range distribution of data in different categories.

Configuration Panel

Search Configuration: Click Search Configuration in the upper-right corner of the Configuration panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for to quickly locate the configuration items. Fuzzy match is supported. For more information, see Search for asset configurations.

Chart name

Custom Margins: the distance between the column chart area and the four boundaries of the widget. The default unit is px. You can click the icon to specify whether to use custom margins.
Series Spacing: the distance between column chart in each series. Valid values: 0 to 1.

Legend: the legend style of the column chart. You can click the 眼睛图标 icon to control the display of the legend.

Parameter	Description
Click to filter	If you turn on the switch, when the widget is configured with multiple series data, use a mobile device in the preview or publish state of the widget, and click a legend of a series in the widget to switch the current series to the selected or unselected state, thus filtering and displaying data of different series in the visualization application. If you turn off the switch, data of different series cannot be filtered and displayed, and legend data of all series is displayed at the same time.
No Color Selected	The legend color of each series when it is not selected.
Layout	The layout style of the legend. You can adjust the position and alignment of the legend layout.
Marker shape	The shape of the legend. Valid values: Round and Square.
Text	The text style of the legend. Font Size: the size of the legend text. Text weight: the weight of the legend text. Color: the color of the legend text. Alignment: the alignment of the legend text. Valid values: Center, Left, and Right.

Axis: You can select x-axis or y-axis.

X Axis

Show: If you turn on the switch, the x-axis style in the widget is visible. If you turn off the switch, the x-axis style in the widget is invisible.

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

Note

If the data format and specified data types are not consistent, the widget is displayed abnormally.

Parameter	Description
Category Type	Data of category types such as character and string is supported.
Time Type	The data of the time type needs to be configured data format.

Number of Scales: the number of scales on the x-axis of the widget.
Leave White: the ratio of white space between the two sides of the x-axis. Valid values: 0 to 1.

Axis Label: the style of the x-axis label of the column chart. You can click the 眼睛图标 icon to display the x-axis label.

Parameter	Description
Label Offset	The up-down displacement distance of the x-axis labels. Unit: px.
Text	The font size, text weight, color, and alignment style of the x-axis label text.

Grid: the style of the x-axis gridlines. You can click the icon to display or hide the x-axis gridlines.

Parameter	Description
Color	The color of the x-axis grid lines.
Width	The width value of the x-axis grid lines.
Linetype	The shape of the x-axis grid line. Valid values: Solid, Dashed, and Dotted.

Axis: the style of the x-axis. You can click the icon to display the x-axis.

Parameter	Description
Color	The color of the x axis.
Width	The width value of the x-axis.
Linetype	The shape of the x-axis line. Valid values: Solid, Dashed, and Dotted.

Tick mark: the style of the tick mark on the x-axis. You can click the icon to show or hide the tick mark on the x-axis.

Parameter	Description
Color	The color of the x-axis tick marks.
Linetype	The shape of the x-axis tick mark. Valid values: Solid, Dashed, and Dotted.
Width	The width value of the x-axis tick mark.
Length	The length value of the x-axis tick mark.

Y-axis

Display: If you turn on the switch, the y-axis style in the widget is visible. If you turn off the switch, the y-axis style in the widget is invisible.
Number of ticks: the number of ticks on the y-axis of the widget.
Scale Optimization: If you turn on the switch, the scale in the y-axis of the widget is automatically optimized. If you turn off the switch, you need to customize the maximum and minimum values of the scale in the y-axis of the widget.
Leave White: the ratio of white space between the two ends of the y-axis. Valid values: 0 to 1.

Axis Label: the style of the y-axis label. You can click the icon to display or hide the y-axis label.

Parameter	Description
Display Format	The display format of the y-axis label content. You can select Original Value, 11 (integer), 11.1 (floating-point number), or 11.11 (floating-point number).
Label Offset	The up-down displacement distance of the y-axis label. Unit: px.
Text	The font size, text weight, color, and alignment style of the y-axis label text.

Grid: the style of the grid lines in the y-axis. You can click the icon to display or hide the grid lines in the y-axis.

Parameter	Description
Color	The color of the y-axis grid lines.
Width	The width value of the y-axis gridlines.
Linetype	The shape of the y-axis grid line. Valid values: Solid, Dashed, and Dotted.

Axis: the style of the y-axis. You can click the icon to display or hide the y-axis.

Parameter	Description
Color	The color of the y-axis.
Width	The width value of the y-axis.
Linetype	The shape of the y-axis line. Valid values: Solid, Dashed, and Dotted.

Tick mark: the style of the tick mark in the y-axis. You can click the icon to display the tick mark.

Parameter	Description
Color	The color of the tick marks on the y-axis.
Linetype	The shape of the y-axis tick mark. Valid values: Solid, Dashed, and Dotted.
Width	The width value of the y-axis tick mark.
Length	The length value of the y-axis tick mark.

Edition

data series: Click the or icon on the right to add or delete a data series. Click the or icon on the right to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configuration and add a data series with the same configuration.

Column Style: the style of the bar column in this series.

Parameter	Description
Color	The color of the column.
Width	The width value of the column.

Remarks

Emotion Animation: the animation effect style of the chart. You can click the icon to enable or disable the animation effect.

Parameter	Description
Easing Effect	The easing effect of animation. The system provides a variety of common easing effects for you to choose from.
Entry Animation Duration	The duration of the first animation rendered by the component. Unit: ms.
Update the animation duration	The duration of the animation when the component data is updated. Unit: ms.

dialog box: the style of the dialog box that appears when you move the pointer over or click an interval column on the preview or publish page. You can click the icon to turn the dialog box effect on or off.

Parameter	Description
Series Name	dialog box the font size and name color of the displayed series names.
Value	dialog box the font size and color of the displayed values.
Gridlines	You can click the icon to turn on or off the dialog box guide line effect. Width: dialog box a value for the width of the guide line. Line Type: dialog box the line shape of the auxiliary line. Valid values: Solid, Dashed, and Dotted. Color: dialog box the color of the auxiliary line.
Background Box	The background box style of the dialog box. Fillet: the fillet size of the dialog box background frame. Unit: pixels. When the value is 0, there is no rounded corner, and the background box is square. The larger the setting value, the larger the radian value of the rounded corner. Color: The background color of the dialog box.

Data dashboard

Column	Description
`x`	The category of each column in the column chart, that is, the value of the x-axis.
`y`	The value of each column data interval in the column chart, that is, the value of the y-axis.
`s`	(Optional) data series a value.

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 clear the check box, the data is not automatically updated. You must manually refresh the page or use the Blueprint Editor and callback ID events to trigger a request to update the data.
Data source	Click Configure Data Source. In the Configure Data Source panel, modify the data source type and query code, preview the response of the data source, and view the response results. For more information, see Configure a component data source.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. Click Add Filter. In the Set Data Source panel, configure a data filter script. For more information, see Use a data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon on the right to view the response results in real time.

Interactive Panel

Select the Enable check box to enable interactions between widgets. When a column of an interval column chart is clicked, a data request is triggered, a callback value is thrown, and data of different columns is dynamically loaded. By default, the x value in the data is returned. For more information, see Component interaction configuration.

Blueprint Interaction

In the canvas editor, right-click a widget in the layer pane and select Export to Blueprint Editor.
Click the icon in the upper-left corner of the page.

In Blueprint Editor, click the Column Chart widget in the Added Nodes pane. On the canvas, you can configure the parameters for the column chart, as shown in the following figure.

Event

Event	Description
When an interval bar chart interface description 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 an interval bar chart interface description request fails	The event that is returned when a data interface request fails (such as 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 clicked	The event that is raised when a column of an interval column chart is clicked, and the data item corresponding to the column is also raised.

Action

Action	Description
API description of a request interval column 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 API data source is `https://api.test` and the data passed to the Request Interval Column Description action is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Import Interval Column Chart Description	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.