S2 uses AntV/G as the graphics engine. Some graphics style configurations, such as the fill attribute and stroke attribute of cells, and the fontFamily and fontSize of drawing fonts, etc., are directly transparently transmitted to AntV/G drawing attributes .

Here is a brief introduction to the commonly used drawing properties of S2:

Configure graphic styles

Configure Line Style

Configure Text Style

Configure Gradients

S2 provides two forms of linear gradient and circular gradient

linear gradient

• l means to use linear gradient, that is, linear gradient , the green font is a variable, which can be customized
• The color variable can be in the form of hexadecimal or rgb(a)

Example:

// 使用渐变色填充，渐变角度为 0，渐变的起始点颜色 #95F0FF，结束的渐变色为 #3A9DBF
fill: `l(0) 0:#95F0FF 1:#3A9DBF`,

Effect:

circular gradient

• r means to use radial gradient, that is, radial gradient , and the green font is a variable, which can be customized
• The x , y , and r values of the circle are all relative values, ranging from 0 to 1
• The color variable can be in the form of hexadecimal or rgb(a)

Example:

// 使用渐变色填充，渐变起始圆的圆心坐标为被填充物体的包围盒中心点，半径为（包围盒对角线长度 / 2) 的 1 倍，渐变的起始点颜色 #ffffff，结束的渐变色为 #1890ff
fill: 'r(0.5, 0.5, 1) 0:#ffffff 0.5:#1890ff';

Effect:

Configure Textures

Fill the shape with a specific texture. Texture content can be directly images or Data URLs.

• p means to use texture, that is pattern , the green font is a variable, which can be customized

• There are 4 types of repetitions:

  • a : the pattern repeats horizontally and vertically
  • x : the pattern repeats only horizontally
  • y : the pattern repeats only vertically
  • n : the pattern is displayed only once (not repeated)

Example:

fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*58XjQY1tO7gAAAAAAAAAAABkARQnAQ';

Effect: