S2 comes with field tagging feature. Users can set different rendering logics based on business semantics to mark and analyze key data. Field tag types include:

• Text field flag (all cell types)
• background field marker (all cell types)
• Histogram (interval) field markers (only data cells are supported)
• Icon (icon) field markers (currently supports pivot table data cells, row and column header cells)

The figure below visually shows the form of the four field tags:

Get started quickly

The S2 field marking feature is configured by configuring the Conditions attribute in s2Options .

// 构建 options
const s2Options = {
  width: 600,
  height: 600,
  // 通过配置 conditions 实现字段标记
  conditions: {
    text: [
      {
        field: "price",
        mapping(fieldValue, data) {
          return {
            // fill 是文本字段标记下唯一必须的字段，用于指定文本颜色
            fill: "#5B8FF9",
          };
        },
      },
    ],
  },
};

configuration explanation

The Conditions attribute can configure four different fields, corresponding to four different field tags.

• text , background and interval are all of Condition array type

  • Contains field and mapping two fields
  • If a field ID matches multiple field marking rules in the same scope, the last rule shall prevail.

• icon is slightly different, it is IconCondition array type

  • One more position field is used to specify the position of the icon relative to the text

Focus on explaining the two fields of field and mapping :

field

field is used to specify which fields to apply the field mark to, and its value range will vary depending on the form of the table:

• For pivot tables, the field value range or regular matching range is values ​​, and the scope of action is the row header, column header, corner header and data cells
• For the detailed table, the field value range or regular matching range is columns , and the range of action is the data cell

​mapping

mapping is a callback function that handles field marking:

If the return value of the mapping function is empty, it means that the field mark of the cell is not rendered

S2 currently has a list of built-in icons:

icon name	icon icon	Functional description	icon name	icon icon	Functional description
Cell Down		YoY decline	ExpandColIcon		Schedule HideExpand
CellUp		YoY rise	Plus		tree form expansion
GlobalAsc		global ascending	Minus		Tree form collapsed
GlobalDesc		global descending	SortDown		Schedule descending
GroupAsc		ascending order within group	SortDownSelected		Schedule descending selection status
GroupDesc		descending order within group	SortUp		Schedule Ascending
trend		Trend	SortUpSelected		Schedule ascending selection status
ArrowUp		indicator rises	ArrowDown		indicators drop
DrillDownIcon		drill down

​

🎨 field mark detailed configuration refer to Conditions API documentation.

characteristic

custom icon position

By setting the position attribute in the icon field tag, you can set whether the icon is on the left or right of the text. (Currently, header cells do not support switching)

The icon for the price field is to the right of the text, and the icon for the cost field is to the left of the text:

Custom histogram range

You can customize the interval range of the histogram by displaying the return value of the mapping attribute in the specified interval field tag and setting the value of the isCompare attribute to true , and specifying the values ​​of maxValue and minValue .

If the value of the isCompare attribute in the return value of the mapping 函数is false or the attribute is not returned. At this time maxValue and minValue will use the maximum and minimum values ​​of the field in all chart data as interval ranges

The price field uses a custom schema, and the cost field uses the default schema:

Two-way histogram

When the interval of the histogram has positive and negative points, and with the fill attribute of the return value of the mapping function, a positive and negative two-way histogram with different colors can be drawn:

​📊 See more field markup examples .

Gradient histogram

The underlying graphic drawing of S2 uses the AntV/g rendering engine. With its powerful drawing capabilities, the fill field is not only a color attribute, but also gradient colors , textures , etc. can be used.

The price field uses a gradient color:

​📊 See more field markup examples .

Turn on text intelligent inversion

By displaying the return value of the mapping function in the specified background field tag the intelligentReverseTextColor attribute value is true . When the mark background color is dark and the text color and background color combination does not meet the Level AA standards of the WCAG2.0 guidelines, the text color will change to white. When the marker background color is bright, the text color defaults to black. Priority: intelligentReverseTextColor of background condition < fill of text condition

​📊 See more field markup examples .