Liquid

2 min read

Plot Container

width

optional number default: 400

Set the width of the chart.

height

optional number default: 400

Set the height of the chart.

autoFit

optional boolean default: true

Whether the chart automatically adjusts to fit the container. If it is set to true, width and height configuration would fail.

padding

optional number[] | number | 'auto'

Set padding value of the canvas. You can also use auto.

appendPadding

optional number[] | number

Extra appendPadding value.

renderer

optional string default: canvas

Set the render way to canvas or svg.

pixelRatio

optional number default: window.devicePixelRatio

Set the pixel ratio of the chart.

limitInPlot

optional boolean

Whether clip the Geometry beyond the coordinate system。

supportCSSTransform

optional boolean

支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

useDeferredLabel

optional boolean|number

开启后 label 渲染会在浏览器空闲时机执行。可制定具体 number 数值,来限定 timeout 时间 (建议开启时,指定 timeout 时间)

locale

optional string

Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use G2Plot.registerLocale to register a new locale. Go src/locales/en_US.ts to see the format.

Data Mapping

percent

required number

Ratio data( Range:[0-1] ).

radius

optional number default: 0.9

Radius of outer ring( Range:[0-1] ).

Graphic Style

liquidStyle

optional StyleAttr | Function

Liguid graphic style.

PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

More documents about ShapeStyle, see Graphic Style.

shape

optional String | Function default: circle

There are five built-in shapes for liquid plot: circle | diamond | triangle | pin | rect. It aslo supports custom shape if shape is a callback function to build path.

示例代码如下:

/**
 * @param x  x for the center point of bounding rectangle
 * @param y  y for the center point of bounding rectangle
 * @param width  width for bounding rectangle
 * @param height  height for bounding rectangle
 * @return  PathCommand[]
 */
function shape(x: number, y: number, width: number, height: number) {
  const h = height / 2;
  const w = width / 2;
  return [
    ['M', x - x / 3, y - h],
    ['L', x + w, y - y / 3],
    ['L', x + x / 3, y + h],
    ['L', x - w, y + y / 3],
    ['Z'],
  ];
}

color

optional string | string[] | Function

Configure the color. If there is no colorField configured, set one single color. Otherwise you can set a series of colors, or you can use callback function.

Default: The color board of the theme.

// set one single color
{
  color: '#a8ddb5'
}
// set a series of colors
{
  colorField: 'type', // or seriesField in some cases
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // or seriesField in some cases
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

pattern ✨

optional object | Function

Set the pattern style of the geometries.

  • PatternOption: consists of type and cfg, type includes: dot, line, square, cfg is optional.
  • Features: pattern will override the style of geometry (such as pieStyle, columnStyle, etc.).
  • Usage: You can set a uniform pattern style for all geometries of the chart by using configuration (PatternOption) or CanvasPattern object, and a callback is provided to set the pattern for each geometry. In addition, we provide getCanvasPattern function, pass in the PatternOption to create the pattern to modify the Legend stylesDemo

The type of pattern is defined as follows:

PatternAttr =
  | CanvasPattern
  | PatternOption
  | ((datum: Datum, color: string /** inherit color */) => PatternOption | CanvasPattern);

Usage:

// set a uniform pattern style for all geometries
{
   pattern: {
    type: 'dot',
    cfg: {
      size: 4,
      padding: 4,
      rotation: 0,
      fill: '#FFF',
      isStagger: true,
    },
  },
}
// set the pattern for each geometry
{
  pattern: ({type}, color) =>{
    if(type ==='分类一') {
      return { 
        type: 'dot',
        cfg: {
          backgroundColor: color, // inherit color
        }
      }
    } else if(type ==='分类二') {
      return {
         type: 'square',
         cfg: {
           backgroundColor: 'pink', // custom color
         }
       }
    } else if(type ==='分类三') {
      return { 
        type: 'line' 
      }
    }
  },
}

Common configuration(cfg) for all types of pattern:

AttributeTypeDescription
backgroundColorstringBackground color of the pattern
fillstringFill color of the symbol in pattern
fillOpacitynumberTransparency of the symbol in pattern
strokestringStroke color of the symbol in pattern
strokeOpacitynumberStroke opacity of the symbol in pattern
lineWidthnumberThe thickness of the symbol's stroke
opacitynumberOverall transparency of the pattern
rotationnumberRotation angle of the pattern

Additional configuration for dotPattern

AttributeTypeDescription
sizenumberThe size of the dot, default: 6
paddingnumberThe distance between dots, default: 2
isStaggerbooleanStaggered dots. default: true

Additional configuration for linePattern

AttributeTypeDescription
spacingnumberThe distance between the two lines, default: 5

Additional configuration for squarePattern

AttributeTypeDescription
sizenumberThe size of the square, default: 6
paddingnumberThe distance between squares, default:1
isStaggerbooleanStaggered squares. default:true

outline

optional Outline

The outline configure for liquid plot, includes:

PropertiesTypeDesc
bordernumberborder width of outline, default 2px
distancenumberdistance between outline and wave, default 0px
styleOutlineStyleCfgthe style configure of outline

The style configure of outline for liquid plot, includes:

PropertiesTypeDesc
strokestringborder color of outline,defaut is same as liquid.color
strokeOpacitynumberborder color opacity of outline

wave

optional Wave

The wave configure for liquid plot, includes:

PropertiesTypeDesc
countnumberwave count, default 3
lengthnumberwave length, default is 192px

Plot Components

statistic

optional object

Metric central text component.

PropertiesTypeDescription
titlefalse | StatisticTexttitle
contentfalse | StatisticTextcontent

StatisticText

PropertiesTypeDescription
styleCSSStyleDeclarationStyles for statistical text (css styles)
contentstringContent of the text。Priority: customHtml > formatter > content
customHtmlCustomHtmlcustom content by using html,priority is higher than formatter
formatterFunctionThe formatted content of the text
rotatenumberRotation angle
offsetXnumberX offset
offsetYnumberY offset

Type of CustomHtml is as follow:

type CustomHtml = (container: HTMLElement, view: View, datum: object, data: object[]) => string;