From a11e84e739fc770b163e1543ca66534d7623f69f Mon Sep 17 00:00:00 2001 From: hustff <31396322+lxfu1@users.noreply.github.com> Date: Wed, 20 Jan 2021 10:31:58 +0800 Subject: [PATCH] docs: multi-language (#2244) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: multi-language * docs: 补充散点图旭日图多语言 * docs: fix CR Co-authored-by: liufu.lf --- docs/api/components/legend.en.md | 62 ++++++- docs/api/graphic-style.en.md | 108 ++++++------ docs/api/options/meta.en.md | 176 ++++++++++++++++++- docs/api/plot-api.en.md | 18 +- docs/api/plots/area.en.md | 10 +- docs/api/plots/bidirectional-bar.en.md | 4 +- docs/api/plots/liquid.en.md | 18 +- docs/api/plots/scatter.en.md | 79 ++++----- docs/api/plots/sunburst.en.md | 44 ++--- docs/common/animate-option.en.md | 18 +- docs/common/annotations.en.md | 78 ++++----- docs/common/axis.en.md | 70 ++++---- docs/common/chord.en.md | 80 ++++++++- docs/common/connected-area.en.md | 8 +- docs/common/conversion-tag.en.md | 40 ++--- docs/common/events.en.md | 59 ++++++- docs/common/interactions.en.md | 35 +++- docs/common/label.en.md | 38 ++-- docs/common/legend-cfg.en.md | 231 ++++++++++++++++++++++++- docs/common/legend-cfg.zh.md | 78 ++++----- docs/common/legend.en.md | 9 +- docs/common/line-style.en.md | 20 +-- docs/common/marker.en.md | 14 +- docs/common/meta.en.md | 16 +- docs/common/point-style.en.md | 12 +- docs/common/shape-style.en.md | 30 ++-- docs/common/slider.en.md | 44 ++--- docs/common/statistic.en.md | 22 +-- docs/common/text-style.en.md | 40 ++--- docs/common/theme.en.md | 126 +++++++++++++- docs/common/tooltip.en.md | 62 +++---- docs/common/xy-field.en.md | 12 +- docs/manual/upgrade.en.md | 78 ++++----- 33 files changed, 1252 insertions(+), 487 deletions(-) diff --git a/docs/api/components/legend.en.md b/docs/api/components/legend.en.md index a9bf349e7d..f514bf3360 100644 --- a/docs/api/components/legend.en.md +++ b/docs/api/components/legend.en.md @@ -3,4 +3,64 @@ title: Legend order: 3 --- -`markdown:docs/api/components/legend.zh.md` \ No newline at end of file +`markdown:docs/styles/legend.md` + +Legend is an auxiliary component of a plot, which uses color, size, and shape mapping, to show the symbol, color, and name of different series. You can click legends to toggle displaying series in the plot. + +There are two ways to configure legends: + +Method 1, pass in the 'false' setting to close the legend. + +```ts +legend: false; // close legend +``` + +Method 2, pass in _LegendCfg_ to configure the legend as a whole. + +```ts +legend: { + layout: 'horizontal', + position: 'right' +} +``` + + + +#### Configuration item（_LegendCfg_） + +| Properties | Type | Default | Description | Apply to | +| ------------- | -------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | +| layout | _string_ | horizontal | The layout of the legend is optional:_horizontal \| vertical_ | | +| title | _object_ | - | Legend title configuration is not displayed by default, reference [title configuration](#title) | | +| position | _string_ | - | Legend position, reference  [position configuration](#position) | | +| offsetX | _number_ | - | Legends offset in the x direction. | | +| offsetY | _number_ | - | Legends offset in the y direction. | | +| background | _object_ | - | Background box configuration item.reference  [background configuration](#background) | | +| flipPage | _boolean_ | false | Whether to page when there are too many legend items. | Classification legend | +| itemWidth | _number\|null_ | null | The width of the legend item, default to null (automatically computed). | Classification legend | +| itemHeight | _number\|null_ | null | The height of the legend, default to null. | Classification legend | +| itemName | _object_ | - | Configure the legend item name text.reference  [itemName configuration](#itemname) | Classification legend | +| itemValue | _object_ | - | Configuration item of legend item Value added value.reference  [itemValue configuration](#itemvalue)。 | Classification legend | +| itemSpacing | _number_ | - | Controls the horizontal spacing of legend items | Classification legend | +| animate | _boolean_ | - | Whether to turn on the animation switch. | | +| animateOption | _object_ | - | Animate parameter configuration, which takes effect if and only if the animate property is true, that is, the animation is turned on, reference [animateOption configuration](#animateOption) | | +| label | _object_ | - | A configuration item for the text.reference [label configuration](#label) | Classification legend | +| marker | _object_ | - | The configuration of the Marker icon of the legend item. | Classification legend | +| maxWidth | _number_ | - | Legend item maximum width set. | Classification legend | +| maxHeight | _number_ | - | Set the maximum height of the legend item. | Classification legend | +| rail | _object_ | - | The style configuration item for the legend slider (background).reference  [rail configuration](#rail) | Classification legend | +| reversed | _boolean_ | - | Whether to display legend items in reverse order. | Classification legend | +| min | _number_ | - | The minimum value of the range. | Continuous legend | +| max | _number_ | - | Select the maximum value of the range. | Continuous legend | +| value | _number[]_ | - | The selected value. | Continuous legend | +| slidable | _boolean_ | - | Whether the slider can slide. | Continuous legend | +| track | _object_ | - | Select the color block style configuration item for the range.reference  [track  configuration](#track) | Continuous legend | +| handler | _object_ | - | Configuration items for the slider.reference [handler configuration](#handler) | Continuous legend | +| custom | _boolean_ | false | If it is a custom legend, the items property needs to be declared when this property is true. | | +| items | _object[]_ | - | The user configures the content of the legend item himself.reference [items configuration](#items) | | + + + +#### Configuration item details + +`markdown:docs/common/legend-cfg.en.md` diff --git a/docs/api/graphic-style.en.md b/docs/api/graphic-style.en.md index 3257959d5a..01deebc8e5 100644 --- a/docs/api/graphic-style.en.md +++ b/docs/api/graphic-style.en.md @@ -9,20 +9,20 @@ In order to make it convenient for users, the common drawing attributes of G2Plo ## Configure graphic styles -| Attributes | Type | Description | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fill | string | 图形的填充色 | -| fillOpacity | number | 图形的填充透明度 | -| stroke | string | 图形的描边 | -| lineWidth | number | 图形描边的宽度 | -| lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | number | 描边透明度 | -| opacity | number | 图形的整体透明度 | -| shadowColor | string | 图形阴影颜色 | -| shadowBlur | number | 图形阴影的高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距图形的水平距离 | -| shadowOffsetY | number | 设置阴影距图形的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | +| Properties | Type | Description | +| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| fill | string | The fill color of the shape | +| fillOpacity | number | The fill transparency of the shape | +| stroke | string | Stroke of the shape | +| lineWidth | number | The width of the shape stroke | +| lineDash | [number,number] | For the dashed line configuration of the stroke, the first value is the length of each segment of the dashed line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke. | +| lineOpacity | number | Stroke transparency | +| opacity | number | The overall transparency of the shape | +| shadowColor | string | Shape shadow color | +| shadowBlur | number | The Gaussian blur factor of the shadow of the shape | +| shadowOffsetX | number | Sets the horizontal distance between the shadow and the shape | +| shadowOffsetY | number | Sets the vertical distance of the shadow from the shape | +| cursor | string | Mouse style. With CSS mouse styles, default 'default'. | Use the full graphic style `columnStyle` to configure the Column graphic style. Example: @@ -44,21 +44,21 @@ Use the full graphic style `columnStyle` to configure the Column graphic style. Result: -加载失败 +Load failed ## Configure line styles -| Attributes | Type | Description | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------ | -| stroke | string | 线的颜色 | -| lineWidth | number | 线宽 | -| lineDash | [number,number] | 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| opacity | number | 透明度 | -| shadowColor | string | 阴影颜色 | -| shadowBlur | number | 高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距图形的水平距离 | -| shadowOffsetY | number | 设置阴影距图形的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| Properties | Type | Description | +| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| stroke | string | The color of the line | +| lineWidth | number | Line width | +| lineDash | [number,number] | With dotted line configuration, the first value is the length of each segment of the dotted line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke. | +| opacity | number | Transparency | +| shadowColor | string | Shadow color | +| shadowBlur | number | Gaussian blur coefficient | +| shadowOffsetX | number | Sets the horizontal distance between the shadow and the shape | +| shadowOffsetY | number | Sets the vertical distance of the shadow from the shape | +| cursor | string | Mouse style. Mouse styles with CSS, default 'default'。 | Use the full graphic style `lineStyle` to configure the Line graphic style. Example: @@ -78,30 +78,30 @@ lineStyle: { Result: -加载失败 +Load failed ## Configure text styles -| Attributes | Type | Description | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fontSize | number | 文字大小 | -| fontFamily | string | 文字字体 | -| fontWeight | number | 字体粗细 | -| lineHeight | number | 文字的行高 | -| textAlign | string | 设置文本内容的当前对齐方式, 支持的属性：`center` | `end` | `left` | `right` | `start`，默认值为`start` | -| textBaseline | string | 设置在绘制文本时使用的当前文本基线, 支持的属性:`top` | `middle` | `bottom` | `alphabetic` | `hanging`。默认值为`bottom` | -| fill | string | 文字的填充色 | -| fillOpacity | number | 文字的填充透明度 | -| stroke | string | 文字的描边 | -| lineWidth | number | 文字描边的宽度 | -| lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | number | 描边透明度 | -| opacity | number | 文字的整体透明度 | -| shadowColor | string | 文字阴影颜色 | -| shadowBlur | number | 文字阴影的高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距文字的水平距离 | -| shadowOffsetY | number | 设置阴影距文字的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| Properties | Type | Description | +| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| fontSize | number | Font size | +| fontFamily | string | Font family | +| fontWeight | number | Font weight | +| lineHeight | number | Line height | +| textAlign | string | Sets the current alignment of text content. Supported property: 'center' \| `end` \| `left` \| `right` \| `start`，默认值为`start` | +| textBaseline | string | Sets the current text baseline to be used when drawing text. Supported property: 'top' \| `middle` \| `bottom` \| `alphabetic` \| `hanging`。默认值为`bottom` | +| fill | string | Fill color for text | +| fillOpacity | number | Fill transparency of text | +| stroke | string | Stroke of text | +| lineWidth | number | The width of the text stroke | +| lineDash | [number,number] | For the dashed line configuration of the stroke, the first value is the length of each segment of the dashed line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke. | +| lineOpacity | number | Stroke transparency | +| opacity | number | Overall transparency of the text | +| shadowColor | string | Text shadow color | +| shadowBlur | number | The Gaussian blur coefficient of the text shadow | +| shadowOffsetX | number | Sets the horizontal distance between the shadow and the text | +| shadowOffsetY | number | Sets the vertical distance between the shadow and the text | +| cursor | string | Mouse style. Mouse styles with CSS, default 'default'。 | Take the `statistic.style` of Liquid for example: @@ -120,7 +120,7 @@ statistic: { Result: -加载失败 +Load failed ## Gradient @@ -128,7 +128,7 @@ G2Plot provides support for linear gradients and circular gradients by default. ### Linear gradient -加载失败 +Load failed > Note: `l` indicates the use of linear gradient, the green font is variable, filled by the user, separated by a blank. @@ -147,7 +147,7 @@ areaStyle: { Result: -加载失败 +Load failed Example (2): Use `barStyle` of Bar to configure the Bar with gradient color. @@ -159,11 +159,11 @@ barStyle: { Result: -加载失败 +Load failed ### Circular gradient -加载失败 +Load failed > Note: `r` indicates the use of a radial gradient, the green font is variable, which is filled in by the user. The xyr values ​​of the starting circle are all relative values, ranging from 0 to 1. @@ -177,7 +177,7 @@ fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff'; Fill the shape with a specific texture. Texture can be images or data URLs. -加载失败 +Load failed > Note: `p` indicates the use of texture. The green font is variable, filled by the user. @@ -196,4 +196,4 @@ columnStyle: { Result: -加载失败 +Load failed diff --git a/docs/api/options/meta.en.md b/docs/api/options/meta.en.md index c982d64c88..b3b41f0170 100644 --- a/docs/api/options/meta.en.md +++ b/docs/api/options/meta.en.md @@ -3,4 +3,178 @@ title: Meta order: 1 --- -`markdown:docs/api/options/meta.zh.md` \ No newline at end of file +Through meta, you can configure the data metadata information of the chart globally, and the configuration is carried out by the unit of field. The configuration on 'meta' affects the text information of all components at the same time. + +## Configuration mode + +Pass in a configuration with field name key, _MetaOption_ as value, and set meta information for multiple fields at the same time. + +```sign +{ + meta: { + [field: string]: MetaOption + } +} +``` + +Example: + +```ts +{ + meta: { + sale: { + min: 0, + max: 100, + }, + } +} +``` + +## Detail configuration item + +_MetaOption_ The configuration is as follows: + +### MetaOption.type + + _string_ **optional** + +Declare the measurement type: + +| Measure type | Description | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Classification measurement | - cat: Classification measurement
- timeCat: Time classification measurement | +| Continuous measurement | - linear: Linear measurement
- time：Continuous time measurement
- log: Log measurement
- pow: Pow measurement
- quantize：Segmentation measurement, where users can specify non-uniform segments
- quantile: Equal measurement, according to the distribution of data automatically calculate segmentation
| +| Constant measurement | - identity: Constant measurement | + +### MetaOption.alias + + _string_ **optional** + +Data field display alias, scale is not internal awareness, external injection. + +### MetaOption.values + + _any[]_ **optional** + +Input field, definition field. + +### MetaOption.formatter + + _(v: any, k?: number) => any_ **optional** + +The tick formatting function affects the display of data on Axis, Legend, and Tooltip. + +### MetaOption.range + + _[number, number]_ **optional** _default:_ `[0, 1]` + +Output field and value field represent the range available for drawing within the drawing range. + +### MetaOption.sync + + _boolean | string_ **optional** + +```ts +{ + meta: { + { + x: { sync: true }, + y: { sync: true }, + x1: { sync: 'x1' }, + x2: { sync: 'x1' }, + } + } +} +``` + +Synchronous scale. sync: `boolean` is sync: \[key\], The above case `x: { sync: true }` is equivalent to `x: { sync: 'x' }`，`y: { sync: true }` is equivalent to `y: { sync: 'y' }`，Therefore, with the above configuration, the measurement operation will be synchronized for fields X and Y and fields X1 and X2 respectively. + +### MetaOption.min + + _any_ **optional** + +Domain minimum value, d3 is the domain, ggplot2 is the limits, not valid under type. + +### MetaOption.max + + _any_ **optional** + +The maximum value of the domain. Invalid under type. + +### MetaOption.minLimit + + _any_ **optional** + +The smallest value of the domain in strict mode. Set to force ticks to start at the smallest. + +### MetaOption.maxLimit + + _any_ **optional** + +The maximum value of the domain in strict mode, which forces the ticks to end at the maximum. + +### MetaOption.base + + _number_ **optional** + +Log is valid. Base. + +### MetaOption.exponent + + _number_ **optional** + +Pow valid, exponent. + +### MetaOption.nice + + _boolean_ **optional** + +Automatically adjust min and Max. + +### MetaOption.ticks + + _any[]_ **optional** + +Use to specify tick, with the highest priority. + +### MetaOption.tickInterval + + _number_ **optional** + +Tick interval, only for type and time type, takes precedence over tickCount. + +### MetaOption.minTickInterval + + _number_ **optional** + +The tick interval is minimal and applies only to linear. + +### MetaOption.tickCount + + _number_ **optional** _default:_ `5` + +The number of tick. + +### MetaOption.maxTickCount + + _number_ **optional** _default:_ `10` + +Ticks maximum. + +### MetaOption.tickMethod + + _string | TickMethod_ **optional** + +Algorithms for calculating ticks. + +### MetaOption.showLast + + _boolean_ **optional** + +Only applies to scale of type: 'time', forcing the last date tick to be displayed. + +### MetaOption.mask + + _string_ **optional** + +Time measures Time and is valid when TIMECAT. The underlying use [fecha] (https://github.com/taylorhakes/fecha#formatting-tokens) for the date format, so for the mask strings can directly refer to their wording. diff --git a/docs/api/plot-api.en.md b/docs/api/plot-api.en.md index 844cf11ae0..88996c8273 100644 --- a/docs/api/plot-api.en.md +++ b/docs/api/plot-api.en.md @@ -5,10 +5,8 @@ redirect_from: - /en/docs/api --- - The core technology architecture of G2Plot is very simple. All plots are inherited from a base class. The base class provides a common API method for all plots, and each specific visualization plot only processes its own configuration items. So all plots basically share the common API, except for some plots (such as Gauge and Liquid) that have subtle differences in the changedata API. - ### 1. create a plot instance The creation of all plots is the same. First, import the corresponding plot class from G2Plot. Then create a plot instance. The constructor has two parameters. @@ -23,8 +21,8 @@ const line = new Line(container', options); The created plot instance has two public properties: - - container: HTMLElement - - options: PlotOptions +- container: HTMLElement +- options: PlotOptions For the API, list all the API methods of the diagram instance separately. If classified by function, it can be divided into: life cycle function, event, status and so on. @@ -52,8 +50,8 @@ plot.changeData(data: object[] | number); Through this method, you can modify the data of the plot and re-render the plot automatically. Most of the plot data is a two-dimensional array, and some plots may have different data structures, such as: - - Gauge、Liquid, which accept the updated percent value - - Dual Axes, which has its own data structure +- Gauge、Liquid, which accept the updated percent value +- Dual Axes, which has its own data structure @@ -105,9 +103,9 @@ plot.setState(state?: 'active' | 'inactive' | 'selected', condition?: Function, The status is a mechanism provided by G2. An element in G2 has three states: - - 'active' - - 'inactive' - - 'selected' +- 'active' +- 'inactive' +- 'selected' Through this API, you can filter elements based on `condition` and set the current state of these elements. @@ -117,4 +115,4 @@ Through this API, you can filter elements based on `condition` and set the curre plot.getStates(); ``` -Get all status information of the current plot. \ No newline at end of file +Get all status information of the current plot. diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md index 401b1203c1..837617bfbb 100644 --- a/docs/api/plots/area.en.md +++ b/docs/api/plots/area.en.md @@ -59,11 +59,11 @@ Area graphic style. Line graphic style in the Area. -| Attr | Type | Description | -| -------------- | ---------------------------------------- | -------- | -| color | _string \| string[] \| Function_ | Line color | -| style | _ShapeStyle \| Function_ | Line graphic style | -| size | _number \| [number, number] \| Function_ | Line width | +| Properties | Type | Description | +| ---------- | ---------------------------------------- | ------------------ | +| color | _string \| string[] \| Function_ | Line color | +| style | _ShapeStyle \| Function_ | Line graphic style | +| size | _number \| [number, number] \| Function_ | Line width | #### point diff --git a/docs/api/plots/bidirectional-bar.en.md b/docs/api/plots/bidirectional-bar.en.md index 408635fc62..eacc82e352 100644 --- a/docs/api/plots/bidirectional-bar.en.md +++ b/docs/api/plots/bidirectional-bar.en.md @@ -26,13 +26,13 @@ Configure the data source. The data source is a collection of objects. For examp **required** _string_ -设置 x 轴字段。 +Set the X-axis field. #### yField **required** _[string,string]_ -设置 y 轴映射字段。 +Set the Y-axis mapping field. diff --git a/docs/api/plots/liquid.en.md b/docs/api/plots/liquid.en.md index 4cf237350c..4c5aadefe3 100644 --- a/docs/api/plots/liquid.en.md +++ b/docs/api/plots/liquid.en.md @@ -9,7 +9,7 @@ order: 12 ### Data Mapping -#### percent +#### percent **required** _number_ @@ -39,10 +39,10 @@ Liguid graphic style. The ouline configure for liquid plot, includes: -| Attr | Type | Desc | -| ------------ | -------------- | ----------------------------------------------------- | -| border | number | border width of ouline, default 2px | -| distance | number | distance between ouline and wave, default 0px | +| Properties | Type | Desc | +| ---------- | ------ | --------------------------------------------- | +| border | number | border width of ouline, default 2px | +| distance | number | distance between ouline and wave, default 0px | #### wave @@ -50,10 +50,10 @@ The ouline configure for liquid plot, includes: The wave configure for liquid plot, includes: -| Attr | Type | Desc | -| ------------ | -------------- | ----------------------------------------------------- | -| count | number | wave count, default 3 | -| length | number | wave length, default is 192px | +| Properties | Type | Desc | +| ---------- | ------ | ----------------------------- | +| count | number | wave count, default 3 | +| length | number | wave length, default is 192px | ### Plot Components diff --git a/docs/api/plots/scatter.en.md b/docs/api/plots/scatter.en.md index d36b7d5a0e..5c77e8598e 100644 --- a/docs/api/plots/scatter.en.md +++ b/docs/api/plots/scatter.en.md @@ -54,13 +54,14 @@ scatterPlot.render(); **optional** _jitter | stack | symmetric | dodge_ _default:_ `jitter` -数据调整类型，不建议修改。 +Adjust the data. +Adjust types provided by G2Plot includes 'stack', 'dodge' 'jitter', 'symmetric'. Not recommended to modify. #### colorField **optional** _string_ -点颜色映射对应的数据字段名。 +The name of the data field corresponding to the dot color map. ### Geometry Style @@ -70,7 +71,7 @@ scatterPlot.render(); **optional** _string_ -点大小映射对应的数据字段名。 +The name of the data field corresponding to the point size map. #### size @@ -78,14 +79,14 @@ scatterPlot.render(); -指定点的大小。如没有配置 sizeField，指定一个即可。对 sizeFiled 进行了配置的情况下，可以指定大小数组 `[minSize, maxSize]`， 也可以通过回调函数的方法根据对应数值进行设置。 +Specifies the size of the point. If no sizeField is configured, specify one. When the Sizefiled is configured, the size array '[minSize, maxSize]' can be specified, or the corresponding value can be set through the callback function method. ```ts -// 设置单一大小 +// Set a single size { size: 10 } -// 大小区间 +// size range { sizeField: 'weight', size: [2, 10], @@ -104,7 +105,7 @@ scatterPlot.render(); **optional** _string_ -点形状映射对应的数据字段名。 +The name of the data field corresponding to the dot shape map. #### shape @@ -112,16 +113,16 @@ scatterPlot.render(); -指定点的形状。如没有配置 shapeField ，指定一个即可。对 shapeField 进行了配置的情况下，可以指定形状数组 `['cicle', 'square']`， 也可以通过回调函数的方法根据对应数值进行设置。 +Specifies the size of the point. If no sizeField is configured, specify one. When the Sizefiled is configured, the size array '[minSize, maxSize]' can be specified, or the corresponding value can be set through the callback function method. -内置图形：circle, square, bowtie, diamond, hexagon, triangle,triangle-down, hollow-circle, hollow-square, hollow-bowtie,hollow-diamond, hollow-hexagon, hollow-triangle, hollow-triangle-down, cross, tick, plus, hyphen, line. +Built-in shape: circle, square, bowtie, diamond, hexagon, triangle,triangle-down, hollow-circle, hollow-square, hollow-bowtie,hollow-diamond, hollow-hexagon, hollow-triangle, hollow-triangle-down, cross, tick, plus, hyphen, line. ```ts -// 设置单一大小 +// Set a single size { shape: 'square' } -// 大小区间 +// The size of the range { shapeField: 'gender', shape: ['circle', 'square'], @@ -143,22 +144,22 @@ scatterPlot.render(); **optional** _object_ -设置折线样式。pointStyle 中的`fill`会覆盖 `color` 的配置。pointStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。 +Set polyline styles. The 'fill' in pointStyle overrides the configuration of 'color'. PointStyle can be specified either directly or via a callback to specify a separate style based on the data. -默认配置： +Default configuration: -| 细分配置 | 类型 | 功能描述 | -| ------------- | ------ | ---------- | -| fill | string | 填充颜色 | -| stroke | string | 描边颜色 | -| lineWidth | number | 线宽 | -| lineDash | number | 虚线显示 | -| opacity | number | 透明度 | -| fillOpacity | number | 填充透明度 | -| strokeOpacity | number | 描边透明度 | +| Properties | Type | Description | +| ------------- | ------ | --------------------- | +| fill | string | Fill color | +| stroke | string | Stroke color | +| lineWidth | number | Line width | +| lineDash | number | The dotted lines show | +| opacity | number | Transparency | +| fillOpacity | number | Fill transparency | +| strokeOpacity | number | Stroke transparency | ```ts -// 直接指定 +// Specified directly { pointStyle: { fill: 'red', @@ -196,15 +197,15 @@ scatterPlot.render(); **optional** _object_ -四象限组件。 +Quadrant components. -| 细分配置 | 类型 | 功能描述 | -| ----------- | -------- | ------------------------------------------ | -| xBaseline | number | x 方向上的象限分割基准线，默认为 0 | -| yBaseline | number | y 方向上的象限分割基准线，默认为 0 | -| lineStyle | object | 配置象限分割线的样式，详细配置参考绘图属性 | -| regionStyle | object[] | 象限样式，详细配置参考绘图属性 | -| labels | object[] | 象限文本配置，详细配置参考绘图属性 | +| Properties | Type | Description | +| ----------- | -------- | --------------------------------------------------------------------------------------------------- | +| xBaseline | number | The quadrant dividing baseline in the x direction, which defaults to 0 | +| yBaseline | number | The Y direction of the quadrant division base line, the default is 0 | +| lineStyle | object | Configure the style of the quadrant divider. Configure the reference drawing properties for details | +| regionStyle | object[] | Quadrant style with detailed configuration of reference drawing properties | +| labels | object[] | Quadrant text configuration, detailed configuration reference drawing properties | #### regressionLine @@ -212,14 +213,14 @@ scatterPlot.render(); **optional** _object_ -回归线。 +Regression line. -| 细分配置 | 类型 | 功能描述 | -| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- | -| type | string | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad | -| style | object | 配置回归线样式，详细配置参考绘图属性 | -| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type | -| top | boolean | 是否顶层显示 | +| Properties | Type | Description | +| ---------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | +| type | string | The type of regression line, exp \| linear \| loess \| log \| poly \| pow \| quad | +| style | object | Configure the regression line style. Configure the reference drawing properties for details | +| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | Custom algorithm with a higher priority than type | +| top | boolean | Whether top level display | ```ts regressionLine: { @@ -247,4 +248,4 @@ regressionLine: { ### Plot Interactions -`markdown:docs/common/interactions.en.md` \ No newline at end of file +`markdown:docs/common/interactions.en.md` diff --git a/docs/api/plots/sunburst.en.md b/docs/api/plots/sunburst.en.md index 6ae388264e..0bd19657f9 100644 --- a/docs/api/plots/sunburst.en.md +++ b/docs/api/plots/sunburst.en.md @@ -13,7 +13,7 @@ order: 17 **required** _object_ -设置图表数据源。 +Set up the chart data source. `markdown:docs/common/meta.en.md` @@ -21,25 +21,25 @@ order: 17 **optional** _partition | treemap_ _default:_ `partition` -布局类型，更多类型探索中。 +Layout types, more types to explore. #### seriesField **optional** _string_ -分组字段，即要映射的数值字段。 +Grouping fields, that is, numeric fields to map. #### reflect **optional** _x | y_ -径向类型，非特殊情况不建议使用。 +Radial type, not recommended in special cases. #### hierarchyConfig **optional** _object_ -层级布局配置，例如 `size`、`padding` 等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。 +Hierarchy configuration, such as' size ', 'padding', etc., refer to [D3-Hierarchy](https://github.com/d3/d3-hierarchy#treemap) for detailed configuration. ### Geometry Style @@ -47,42 +47,42 @@ order: 17 **optional** _string_ _default:_ `1` -半径，0 ~ 1。 +Radius, 0~1 of the value. #### innerRadius **optional** _number_ _default:_ `0` -内径，0 ~ 1。 +Inner radius, 0~1 of the value. #### colorField **optional** _string_ -颜色映射字段。 +Color mapping field. `markdown:docs/common/color.en.md` -#### sunburstStyle +#### sunburstStyle **optional** _object_ -旭日图形样式。pointStyle 中的`fill`会覆盖 `color` 的配置。sunburstStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。 +Sunburst graphic style. The 'fill' in pointStyle overrides the configuration of 'color'. SunBurstStyle can be specified either directly or via a callback to specify a separate style based on the data. -默认配置： +Default configuration: -| 细分配置 | 类型 | 功能描述 | -| ------------- | ------ | ---------- | -| fill | string | 填充颜色 | -| stroke | string | 描边颜色 | -| lineWidth | number | 线宽 | -| lineDash | number | 虚线显示 | -| opacity | number | 透明度 | -| fillOpacity | number | 填充透明度 | -| strokeOpacity | number | 描边透明度 | +| Properties | Type | Description | +| ------------- | ------ | --------------------- | +| fill | string | Fill color | +| stroke | string | Stroke color | +| lineWidth | number | Line width | +| lineDash | number | The dotted lines show | +| opacity | number | Transparency | +| fillOpacity | number | Fill transparency | +| strokeOpacity | number | Stroke transparency | ```ts -// 直接指定 +// Specified directly { sunburstStyle: { fill: 'red', @@ -128,4 +128,4 @@ order: 17 ### Plot Interactions -`markdown:docs/common/interactions.en.md` \ No newline at end of file +`markdown:docs/common/interactions.en.md` diff --git a/docs/common/animate-option.en.md b/docs/common/animate-option.en.md index b6a8303809..a30b455249 100644 --- a/docs/common/animate-option.en.md +++ b/docs/common/animate-option.en.md @@ -1,23 +1,23 @@
-_ComponentAnimateOption_ 为组件各个动画类型配置。其中 `easing` 传入动画函数名称，内置默认动画函数如下表，同时也可以通过 `registerAnimation` 自定义动画函数。 +_ComponentAnimateOption_ is configured for each component animation type. Where 'easing' passes in the name of the animation function, the built-in default animation function is shown in the table below, and you can also customize the animation function through 'registerAnimation'. ```ts interface ComponentAnimateOption { - appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画 - enter?: ComponentAnimateCfg; // 图表绘制完成，发生更新后，产生的新图形的进场动画 - update?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画 - leave?: ComponentAnimateCfg; // 图表绘制完成，数据发生变更后，被销毁图形的销毁动画 + appear?: ComponentAnimateCfg; // The entry animation when the chart first loads + enter?: ComponentAnimateCfg; // After the chart is drawn and updated, the incoming animation of the new graph is generated + update?: ComponentAnimateCfg; // After the chart is drawn and the data has changed, the updated animation of the graph with the state changed + leave?: ComponentAnimateCfg; // After the chart is drawn and the data is changed, the destruction animation of the graph is destroyed } interface ComponentAnimateCfg { - duration?: number; // 动画执行时间 - easing?: string; // 动画缓动函数 - delay?: number; // 动画延迟时间 + duration?: number; // Duration of the first animation + easing?: string; // Easing method used for the first animation. + delay?: number; // Delay before updating the animation } ``` -| animation | 效果 | 说明 | +| Animation | Effect | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | 'fade-in' | ![fade-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*LTRRRL8JwfQAAAAAAAAAAABkARQnAQ) | 渐现动画。 | | 'fade-out' | ![fade-out.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*s4Y4S5JJ6WEAAAAAAAAAAABkARQnAQ) | 渐隐动画。 | diff --git a/docs/common/annotations.en.md b/docs/common/annotations.en.md index b370ec14ba..d729963b4e 100644 --- a/docs/common/annotations.en.md +++ b/docs/common/annotations.en.md @@ -1,4 +1,4 @@ -标注是数组类型，可以设置多个。 +Annotations are array types and can be set multiple times. ```ts annotations: [ @@ -17,57 +17,57 @@ annotations: [ **required** _string_ -标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html. +Type of annotation, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html. ##### position **required** _object_ -标注位置。 +The position of annotation. -- 第一种，object 使用图表 x, y 对应的原始数据例如：{ time: '2010-01-01', value: 200 }; -- 第二种，数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式： - 1、对应数据源中的原始数据； - 2、关键字：'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束； - 3、x, y 都是百分比的形式，如 30%，在绘图区域定位(即坐标系内)。 - 1 和 2 两种类型的数据可以混用，但是使用百分比形式时 x 和 y 必须都是百分比形式。 -- 第三种，回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景。 +- In the first case, object uses the raw data corresponding to graphs x and y. For example: { time: '2010-01-01', value: 200 }; +- The second way is to configure the position [x, y] in an array. Based on the presence of the values in the array, the following forms are used: + 1、Corresponding to the original data in the data source; + 2、Key words: 'min', 'Max', 'median', 'median', 'start' and 'end' respectively represent the maximum value, minimum value, median value of data and the start and end of coordinate system interval; + 3、X, y are percentages, such as 30%, located in the drawing area (that is, in the coordinate system). + The 1 and 2 types of data can be used interchangeably, but when using the percentage form, x and y must both be in the percentage form. +- The third, callback function, can dynamically determine the position of the auxiliary element, applied to dynamic data update, the position of the auxiliary element changes according to the data. ##### top **optional** _boolean_ _default:_ `false` -是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。 +If it is drawn at the top of the canvas, the default is false, meaning it is drawn at the bottom. ##### animate **optional** _boolean_ -是否进行动画。 +Whether to enable animation. ##### offsetX **optional** _number_ -x 方向的偏移量。 +The offset in the x direction. ##### offsetY **optional** _number_ -y 方向的偏移量。 +The offset in the y direction. ##### start **optional** _Array_ -起始位置，一般用于 line、region 等。 +Starting position, commonly used for line, region, etc. ##### end **optional** _Array_ -结束位置，一般用于 line、region 等。 +End position, commonly used for line, region, etc. ```ts { @@ -81,117 +81,117 @@ y 方向的偏移量。 **optional** _object_ -图形样式属性，参考绘图属性。 +The graph style properties refer to the Graphic Style. ##### src **optional** _string_ -图片路径，用于 image 中。 +Image path, used in image. ##### content **optional** _string_ -文本内容，用于 text 中。 +Text content, used in text. ##### rotate **optional** _number_ -文本的旋转角度，弧度制。 +The rotation Angle of text in radians. ##### maxLength **optional** _number_ -文文本的最大长度。 +The maximum length of a text. ##### autoEllipsis **optional** _boolean_ -超出 maxLength 是否自动省略。 +Whether the maxLength beyond is automatically omitted. ##### ellipsisPosition **optional** _head | middle | tail _ -文本截断的位置。 +The location of the text truncation. ##### isVertical **optional** _boolean_ -文本在二维坐标系的显示位置，是沿着 x 轴显示 还是沿着 y 轴显示。 +The display position of the text in a two-dimensional coordinate system, whether it is displayed along the X axis or along the Y axis. ##### background **optional** _object_ -文字包围盒样式设置。 +Text wrap box style Settings. -| 参数名 | 类型 | 默认值 | 描述 | -| ------- | ------------------- | -------- | ------ | ------------------ | -| style | _object_ | - | 文本背景的样式, 参考[绘图属性](/en/docs/api/graphic-style) | -| padding | _number \| number[]_ | - | 文本背景周围的留白 | +| Properties | Type | Default | Description | +| ---------- | -------------------- | ------- | --------------------------------------------------------------------------- | +| style | _object_ | - | Text background style, reference[Graphic Style](/en/docs/api/graphic-style) | +| padding | _number \| number[]_ | - | White space around the background of a text | ##### color **optional** _string_ -染色色值，一般用于 regionFilter。 +Color value, usually used in RegionFilter. ##### apply **optional** _string[]_ -设定 regionFilter 只对特定 geometry 类型起作用，如 apply: ['area']，一般用于 regionFilter。 +RegionFilter is set to work only on a specific Geometry type, such as Apply: ['area'], which is generally used with RegionFilter. ##### autoAdjust **optional** _boolean_ -文本超出绘制区域时，是否自动调节文本方向。 +Whether to automatically adjust text orientation when text exceeds the drawn area. ##### direction **optional** _upward | downward_ -朝向。 +Orientation. ##### lineLength **optional** _number_ -line 长度，用于 dataRegion。 +Line length for dataRegion. ##### render **optional** _string_ -自定义标记的绘制 render 函数，其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数，其他 parserPosition 可以用来计算数据点对应的坐标位置，用于 shape。 +Render function of custom marking, other container is the parent container of marking drawing, view is the graphic instance, helpers is the auxiliary function, other parserPosition can be used to calculate the coordinate position corresponding to data points, used in shape. ##### container **optional** _string | HTMLElement_ -自定义 HTML 图形标记的容器元素，用于 html +Container elements for custom HTML graphical tags for HTML ##### container **optional** _string | HTMLElement_ -自定义的图形标记的 HTML 元素，可为 HTML DOM 字符串，或 HTML 元素，或 html 回调函数，用于 html +Custom graphical markup of HTML elements, either as HTML DOM strings, or HTML elements, or HTML callback functions, for HTML ##### alignX **optional** _left' | 'middle' | 'right'_ -DOM 元素在 X 方向的对齐方式，用于 html +Alignment of DOM elements in the X direction for HTML ##### alignY **optional** _left' | 'middle' | 'right'_ -DOM 元素在 Y 方向的对齐方式，用于 html +Alignment of DOM elements in the Y direction for HTML diff --git a/docs/common/axis.en.md b/docs/common/axis.en.md index 4715d19129..834fa6f05d 100644 --- a/docs/common/axis.en.md +++ b/docs/common/axis.en.md @@ -2,61 +2,61 @@ **optional** _boolean_ _default:_ `true` -是否美化。 +Whether to nice. ##### min **optional** _number_ _default:_ `0` -坐标轴最小值。 +Minimum axis. ##### max **optional** _number_ -坐标轴最大值。 +Maximum axis. ##### minLimit **optional** _number_ -最小值限定。 +Minimal limit. ##### maxLimit **optional** _number_ -最大值限定。 +Maximum limit. ##### tickCount **optional** _number_ -期望的坐标轴刻度数量，非最终结果。 +The expected number of axes, not the final result. ##### tickInterval **optional** _number_ -坐标轴刻度间隔。 +Interval of axes. ##### tickMethod **optional** _string | Function_ _default:_ `false` -指定 tick 计算方法，或自定义计算 tick 的方法，内置 tick 计算方法包括 `cat`、`time-cat`、 `wilkinson-extended`、`r-pretty`、`time`、`time-pretty`、`log`、`pow`、`quantile`、`d3-linear`。 +Specify a tick calculation method, or customize a tick calculation method. Built-in tick calculations include `cat`、`time-cat`、 `wilkinson-extended`、`r-pretty`、`time`、`time-pretty`、`log`、`pow`、`quantile`、`d3-linear`。 ##### position **optional** _`top` | `bottom` | `left` | `right`_ -适用于直角坐标系，设置坐标轴的位置。 +For Cartesian coordinates, set the position of the coordinate axes. ##### line **optional** _object_ -坐标轴线的配置项，null 表示不展示。 +Coordinate axis configuration item, NULL means not displayed. `markdown:docs/common/line-style.en.md` @@ -64,7 +64,7 @@ **optional** _object_ -坐标轴刻度线线的配置项，null 表示不展示。 +The configuration item of the coordinate axis scale line. NULL means not displayed. `markdown:docs/common/line-style.en.md` @@ -72,7 +72,7 @@ **optional** _object_ -坐标轴子刻度线的配置项，null 表示不展示。 +A configuration item for a coordinate subscale. NULL indicates that it is not displayed. `markdown:docs/common/line-style.en.md` @@ -80,14 +80,14 @@ **optional** _object_ -标题的配置项，null 表示不展示。 +A configuration item for the title, NULL means not to be displayed. -| 细分配置项名称 | 类型 | 功能描述 | -| -------------- | ------------ | ------------------------ | -| offset | _number_ | 标题距离坐标轴的距离 | -| spacing | _lineStyle_ | 标题距离坐标轴文本的距离 | -| style | _shapeStyle_ | 标题文本配置项 | -| autoRotate | _boolean_ | 是否自动旋转 | +| Properties | Type | Description | +| ---------- | ------------ | ------------------------------------------------------------------ | +| offset | _number_ | The distance of the title from the coordinate axis | +| spacing | _lineStyle_ | The distance between the title and the text on the coordinate axis | +| style | _shapeStyle_ | Title text configuration items | +| autoRotate | _boolean_ | Whether to rotate automatically or not | **_shapeStyle_** @@ -97,7 +97,7 @@ **optional** _object_ -文本标签的配置项，null 表示不展示。 +A configuration item for the text label. NULL indicates that it is not displayed. `markdown:docs/common/label.en.md` @@ -105,14 +105,14 @@ **optional** _object_ -坐标轴网格线的配置项，null 表示不展示。 +Axis grid line configuration item. NULL means not shown. -| 细分配置项名称 | 类型 | 功能描述 | -| -------------- | ------------------ | -------------------------------------------------------- | -| line | _lineStyle_ | 线的样式 | -| alternateColor | _string\|string[]_ | 两个栅格线间的填充色 | -| closed | _boolean_ | 对于 circle 是否关闭 grid | -| alignTick | _boolean_ | 是否同刻度线对齐，如果值为 false，则会显示在两个刻度中间 | +| Properties | Type | Description | +| -------------- | ------------------ | ------------------------------------------------------------------ | +| line | _lineStyle_ | The style of the line | +| alternateColor | _string\|string[]_ | The fill color between two grid lines | +| closed | _boolean_ | Whether to close the grid for circle | +| alignTick | _boolean_ | If the value is false, it will be displayed between the two scales | **_lineStyle_** @@ -122,24 +122,24 @@ **optional** _boolean_ _default:_ `true` -动画开关，默认开启。 +Animation switch, default true. ##### animateOption **optional** _object_ -动画参数配置。 +Animation parameter configuration. ```ts interface ComponentAnimateCfg { - /** 动画执行时间 */ + /** Duration of the first animation */ readonly duration?: number; - /** 动画缓动函数 */ + /** Easing method used for the first animation. */ readonly easing?: string; - /** 动画延迟时间 */ + /** Delay before updating the animation */ readonly delay?: number; } -// 配置参考 +// Configure the reference { animateOption: { appear: ComponentAnimateCfg; @@ -154,10 +154,10 @@ interface ComponentAnimateCfg { **optional** _number_ -标记坐标轴 label 的方向，左侧为 1，右侧为 -1。 +Mark the direction of the label on the axis, with 1 to the left and -1 to the right. ##### verticalLimitLength **optional** _number_ -配置坐标轴垂直方向的最大限制长度，对文本自适应有很大影响。 +Configuring the maximum limit length in the vertical direction of the coordinate axis has a significant impact on text adaptation. diff --git a/docs/common/chord.en.md b/docs/common/chord.en.md index c19890545a..2d3c9d4f63 100644 --- a/docs/common/chord.en.md +++ b/docs/common/chord.en.md @@ -3,4 +3,82 @@ title: Chord order: 28 --- -`markdown:docs/manual/plots/chord.zh.md` \ No newline at end of file +### Plot Container + +`markdown:docs/common/chart-options.en.md` + +### Data Mapping + +#### data + +**required** _array object_ + +Set up the chart data source. The data source is a collection of objects, for example：`[{ source: '北京', target: '天津', value: 30 }, ...]`。 + +#### sourceField + +**required** _string_ + +Sets the source node data field for the chord chart. For example, for the above data, it is： `source`。 + +#### targetField + +**required** _string_ + +Sets the target node data field of the chord graph. For example, for the above data, it is： `target`。 + +#### weightField + +**required** _string_ + +Set the weight field information of nodes and edges. The larger the data, the larger the nodes and edges. For example, for the above data, it is： `value`。 + +### Geometry Style + +#### nodeStyle + +**optional** _StyleAttr | Function_ + +Configuration of chord graph node styles. + +#### edgeStyle + +**optional** _StyleAttr | Function_ + +Configuration of chord graph edge styles. + +`markdown:docs/common/color.en.md` + +#### nodeWidthRatio + +**optional** _number_ + +弦图节点的宽度配置，0 ~ 1，参考画布的宽度，默认为 `0.05`。 + +#### nodePaddingRatio + +**optional** _number_ + +弦图节点之间的间距，0 ~ 1，参考画布的高度，默认为 `0.1`。 + +### Event + +`markdown:docs/common/events.en.md` + +### Plot Method + +`markdown:docs/common/chart-methods.en.md` + +### Plot Theme + +`markdown:docs/common/theme.en.md` + +### Plot Interactions + +#### 默认交互 + +```plain +interactions: [{ type: 'element-active' }] +``` + +`markdown:docs/common/interactions.en.md` diff --git a/docs/common/connected-area.en.md b/docs/common/connected-area.en.md index 83c418b65f..b7947f1f06 100644 --- a/docs/common/connected-area.en.md +++ b/docs/common/connected-area.en.md @@ -1,7 +1,7 @@ -适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。 +Applicable to stacked bar charts and stacked bar charts, the link area component provides visual assistant identification by drawing the link area of the same field, which is convenient for data comparison. **optional** _object_ | _false_ -| 配置项 | 类型 | 是否必选 | 默认值｜ 功能描述 | -| ------- | ---------------- | ------------ | ----------------- | -| trigger | 'hover'、'click' | 否 ｜'hover' | 触发方式 | +| Properties | Type | Required | Default ｜ Description | +| ---------- | ---------------- | ------------ | ---------------------- | +| trigger | 'hover'、'click' | No ｜'hover' | Trigger method | diff --git a/docs/common/conversion-tag.en.md b/docs/common/conversion-tag.en.md index 7d11acf669..7ce6aa4f3a 100644 --- a/docs/common/conversion-tag.en.md +++ b/docs/common/conversion-tag.en.md @@ -1,28 +1,28 @@ -适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。 +Applicable to base bar charts and base bar charts, the Conversion Rate component allows the user to focus on the rate of change in the data. **optional** _object_ | _false_ -| 配置项 | 类型 | 是否必选 | 默认值 | 功能描述 | -| ------- | --------------- | -------- | ------ | -------------------------------- | -| size | number | 否 | - | 转化率组件尺寸 | -| spacing | number | 否 | - | 组件和柱子间距 | -| offset | number | 否 | - | 组件和轴线间距 | -| arrow | ArrowCfg、false | 否 | - | 箭头形状配置，false 时不显示箭头 | -| text | TextCfg、false | 否 | - | 文本配置、false 时不显示文本 | +| Properties | Type | Required | Default | Description | +| ---------- | --------------- | -------- | ------- | -------------------------------------------------------- | +| size | number | No | - | Conversion rate Component dimensions | +| spacing | number | No | - | Component and column spacing | +| offset | number | No | - | Component and axis spacing | +| arrow | ArrowCfg、false | No | - | Arrow shape configuration, false does not display arrows | +| text | TextCfg、false | No | - | Text configuration, false does not display text | -其中 ArrowCfg 配置如下 +ArrowCfg configuration is as follows: -| 配置项 | 类型 | 是否必选 | 默认值 | 功能描述 | -| -------- | ------ | -------- | ------ | -------- | -| headSize | number | 否 | - | 箭头尺寸 | -| style | object | 否 | - | 箭头样式 | +| Properties | Type | Required | Default | Description | +| ---------- | ------ | -------- | ------- | ----------------- | +| headSize | number | No | - | Size of the arrow | +| style | object | No | - | Arrow style | -TextCfg 配置如下 +TextCfg configuration is as follows: -| 配置项 | 类型 | 是否必选 | 默认值 | 功能描述 | -| --------- | ------------------------------------ | -------- | ------ | ---------------- | -| headSize | number | 否 | - | 箭头尺寸 | -| style | object | 否 | - | 箭头样式 | -| formatter | (prev:number, next:number) => string | 否 | - | 自定义转化率计算 | +| Properties | Type | Required | Default | Description | +| ---------- | ------------------------------------ | -------- | ------- | ---------------------------------- | +| headSize | number | No | - | Size of the arrow | +| style | object | No | - | Arrow style | +| formatter | (prev:number, next:number) => string | No | - | Custom conversion rate calculation | -样式配置类型请参考[ShapeAttrs](/en/docs/api/graphic-style) +Please refer to the style configuration [ShapeAttrs](/en/docs/api/graphic-style) diff --git a/docs/common/events.en.md b/docs/common/events.en.md index 877d1a7e87..748b9f28fc 100644 --- a/docs/common/events.en.md +++ b/docs/common/events.en.md @@ -1 +1,58 @@ -`markdown:docs/common/events.zh.md` \ No newline at end of file +On Plot, binding events are removed by ON and OFF. + +```ts +// Bind event +plot.on('eventName', callback); +// Remove event +plot.off('eventName', callback); +``` + +#### eventName + +Composition: element + ':' + events。 + +Element refers to the type of element to bind to, for example `element`、`legend-item`、`axis-label`、`mask`、`plot`、`legend-item-name`、`reset-button` etc. + +Events correspond to DOM common events, for example `click`、`mousedown`、`mouseup`、`dblclick`、`mouseenter`、`mouseout`、`mouseover`、`mousemove`、`mouseleave`、`contextmenu` etc. And support mobile events: `touchstart`、`touchmove`、`touchend` + +```ts +// Plot adds click events to the entire chart area +plot.on('plot:click', (...args) => { + console.log(...args); +}); + +// Element to add a click event, element represents the graphic elements, graphical elements, please see: https://g2.antv.vision/en/docs/manual/concepts/element +plot.on('element:click', (...args) => { + console.log(...args); +}); + +// Legend adds click events +plot.on('legend-item:click', (...args) => { + console.log(...args); +}); + +// Legend name adds click event +plot.on('legend-item-name:click', (...args) => { + console.log(...args); +}); + +// Label adds click events +plot.on('label:click', (...args) => { + console.log(...args); +}); + +// Mask adds click events +plot.on('mask:click', (...args) => { + console.log(...args); +}); + +// Axis-label adds click events +plot.on('axis-label:click', (...args) => { + console.log(...args); +}); + +// Add click events to the annotation +plot.on('annotation:click', (...args) => { + console.log(...args); +}); +``` diff --git a/docs/common/interactions.en.md b/docs/common/interactions.en.md index 19a3f7b23c..a251ed4f33 100644 --- a/docs/common/interactions.en.md +++ b/docs/common/interactions.en.md @@ -1 +1,34 @@ -`markdown:docs/common/interactions.zh.md` \ No newline at end of file +#### Introduction + +Interaction is an important API in G2, and it is a way to load G2's built-in interactions or custom Interaction interactions based on the Interaction syntax form. G2 4.0 has made a big change in terms of interaction. All interaction code is intrusive and is organized through interaction syntax. The way to use the interaction is also very simple, you just need to set the name of the interaction. + +In G2Plot, G2's interaction syntax is passed through, as well as some built-in interactions with specific plot bindings. + +Usage: + +```ts +// Enable the Active interaction when the mouse moves over a chart element (bar in a bar, dot in a dot, etc.) +interactions: [{ type: 'element-active' }]; + +// Enable multiple interactions +interactions: [{ type: 'element-active' }, { type: 'brush' }]; +``` + +#### Remove the interaction + +```ts +plot.chart.removeInteraction('interaction-type'); +``` + +Usage: + +```ts +// Removes legend filtering interaction +plot.chart.removeInteraction('legend-filter'); +``` + +#### More + +More instructions about interaction, see [G2 document] (https://g2.antv.vision/en/docs/api/general/interaction) + +The list of built-in supported interactions and interactions with specific plot bindings will be added later. diff --git a/docs/common/label.en.md b/docs/common/label.en.md index 3b46dd811c..37ce0a3e94 100644 --- a/docs/common/label.en.md +++ b/docs/common/label.en.md @@ -1,25 +1,25 @@ -| 属性名 | 类型 | 介绍 | -| ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| type | _string_ | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| -| offset | _number_ | label 的偏移量 | -| offsetX | _number_ | label 相对于数据点在 X 方向的偏移距离 | -| offsetY | _number_ | label 相对于数据点在 Y 方向的偏移距离 | -| content | _string \| IGroup \| IShape \| GeometryLabelContentCallback_ | 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示 | -| style | object | label 文本图形属性样式 | -| autoRotate | _string_ | 是否自动旋转，默认 true | -| rotate | _number_ | 文本旋转角度 | -| labelLine | _null \| _boolean_ \|object_ | 用于设置文本连接线的样式属性，null 表示不展示。 | -| labelEmit | _boolean_ | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭 | -| layout | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_ | 文本布局类型，支持多种布局函数组合使用。 | -| position | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_ | 指定当前 label 与当前图形的相对位置 | -| animate | _boolean \| AnimateOption_ | 动画配置。 | -| formatter | _Function_ | 格式化函数 | -| autoHide | _boolean_ | 是否自动隐藏，默认 false | - | +| Properties | Type | Description | +| ---------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | --------- | +| type | _string_ | When a user uses a custom label type, need to declare the specific type, otherwise you will use the default label type rendering (pie chart label support `inner | outer | spiders`) | +| offset | _number_ | label offset | +| offsetX | _number_ | The offset distance of the label from the data point in the X direction | +| offsetY | _number_ | The offset distance of the label from the data point in the Y direction | +| content | _string \| IGroup \| IShape \| GeometryLabelContentCallback_ | Text content that is displayed, if not declared, is displayed according to the value of the first field participating in the mapping | +| style | object | Label text graphic property style | +| autoRotate | _string_ | Whether to rotate automatically, default true | +| rotate | _number_ | Text rotation Angle | +| labelLine | _null \| \_boolean_ \|object\_ | Used to set the style property of the text connector. NULL indicates that it is not displayed. | +| labelEmit | _boolean_ | Only applies to text in polar coordinates, indicating whether the text is radially displayed according to the Angle. True means on and false means off | +| layout | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_ | Text layout type, support a variety of layout function combination. | +| position | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_ | Specifies the position of the current Label relative to the current graphic | +| animate | _boolean \| AnimateOption_ | Animation configuration. | +| formatter | _Function_ | Format function | +| autoHide | _boolean_ | Whether to hide it automatically, default to false | +| | -示例代码： +Example code: ```ts { diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md index d527ca706d..6bbc67ea85 100644 --- a/docs/common/legend-cfg.en.md +++ b/docs/common/legend-cfg.en.md @@ -1 +1,230 @@ -`markdown:docs/common/legend-cfg.zh.md` +##### layout + +**optional** _horizontal | vertical_ + +Layout + +##### position + +**optional** _string_ + +The position of legend is optional: + +- `top` +- `top-left` +- `top-right` +- `right` +- `right-top` +- `right-bottom` +- `left` +- `left-top` +- `left-bottom` +- `bottom` +- `bottom-left` +- `bottom-right` + +##### background + +**optional** _LegendBackgroundCfg_ + +Background box configuration item. _LegendBackgroundCFG_ is configured as follows: + +| Properties | Type | Default | Description | +| ---------- | ------------------ | ------- | ------------------------------------------------------- | +| padding | number \| number[] | - | White space in the background | +| style | object | - | Background style configuration, Reference Graphic Style | + +##### flipPage + +**optional** _boolean_ + +Apply to Classification legend,whether to page when there are too many legend items. + +##### handler + +**optional** _ContinueLegendHandlerCfg_ +Apply to Continuous legend, configuration items for slider _ContinueLegendHandlerCfg_ is configured as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | --------------------------------------------------------------------------- | +| size | _number_ | - | Slider size | +| style | _object_ | - | Slider configuration, reference [Graphic Style](/zh/docs/api/graphic-style) | + +##### itemHeight + +**optional** _number_ _default:_ `null` + +Apply to Classification legend, lengend item height, default null。 + +##### itemWidth + +**optional** _number_ _default:_ `null` + +Apply to Classification legend, legend item width, default null, automatic calculation. + +##### itemName + +**optional** _LegendItemNameCfg_ + +Apply to Classification legend, configure the legend item name text. _LegendItemNameCfg_ is configured as follows： + +| Properties | Type | Default | Description | +| ---------- | ---------- | ------- | -------------------------------------------------------------------------------- | +| style | _object_ | - | Text style configuration, referecnce [Graphic Style](/zh/docs/api/graphic-style) | +| spacing | _number_ | `false` | The spacing between legend item marker and the following name | +| formatter | _function_ | - | Format function, `(text: string, item: ListItem, index: number) => any;` | + +##### itemSpacing + +**optional** _number_ + +Apply to Classification legend, control the horizontal spacing of legend items. + +##### itemValue + +**optional** _LegendItemValueCfg_ + +Apply to Classification legend, configuration item of legend item Value added value. _LegendItemValueCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ---------- | ---------- | ------- | ------------------------------------------------------------------------------------ | +| style | _object_ | - | Text style configuration item, reference [Graphic Style](/zh/docs/api/graphic-style) | +| alignRight | _boolean_ | `false` | Right-align, false by default, only when setting legend item width. | +| formatter | _function_ | - | Format function, `(text: string, item: ListItem, index: number) => any;` | + +##### animate + +**optional** _boolean_ + +Whether to turn on the animation switch. + +##### animateOption + +**optional** _ComponentAnimateOption_ + +Animation parameter configuration, which takes effect if and only if the animate property is true, that is, when the animation is turned on. Animation configuration details are as follows: + +`markdown:docs/common/animate-option.en.md` + +##### label + +**optional** _ContinueLegendLabelCfg_ + +Apply to Continuous legend, a configuration item for the text, _ContinueLegendLabelCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| align | _string_ | - | The alignment of text with the slider
- rail : Align with the slide rail, at both ends of the slide rail
- top, bottom: Legends are valid when laid out horizontally
- left, right: Legends are valid when laid out vertically | +| style | _object_ | - | Text style configuration item, reference [Graphic Style](/zh/docs/api/graphic-style) | +| spacing | _number_ | - | The distance between the text and the slide | + +##### marker + +**optional** _MarkerCfg_ + +Apply to Classification legend, the configuration of the Marker icon of the legend item. + +`markdown:docs/common/marker.en.md` + +##### min + +**optional** _number_ + +Apply to Continuous legend, select the minimum value of the range. + +##### max + +**optional** _number_ + +Apply to Continuous legend, select the maximum value of the range. + +##### maxWidth + +**optional** _number_ + +Apply to Classification legend, the maximum width of the legend item. + +##### maxHeight + +**optional** _number_ + +Apply to Classification legend, the maximum height of the legend item. + +##### offsetX + +**optional** _number_ + +Legends offset in the x direction. + +##### offsetY + +**optional** _number_ + +Legends offset in the y direction. + +##### rail + +**optional** _ContinueLegendRailCfg_ +Apply to Classification legend, a style configuration item for the legend slider (background)._ContinueLegendRailCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| type | _string_ | - | rail type: color and size | +| size | _number_ | - | The width of the slide rail | +| defaultLength | _number_ | - | The default length of the slider. When maxWidth,maxHeight is limited, this property is not used and the length is automatically calculated | +| style | _object_ | - | Slide rail style, refer to [Graphic Style](/zh/docs/api/graphic-style) | + +##### reversed + +**optional** _boolean_ +Apply to Classification legend, whether to display legend items in reverse order. + +##### slidable + +**optional** _boolean_ +Apply to Continuous legend, whether the slider can slide. + +##### title + +**optional** _G2LegendTitleCfg_ + +Legend title configuration is not displayed by default. _G2LegendTitleCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | ----------------------------------------------------------------------------------- | +| spacing | _number_ | - | The spacing between the title and the legend item | +| style | _object_ | - | Text style configuration item, refer to [Graphic Style](/zh/docs/api/graphic-style) | + +##### track + +**optional** _ContinueLegendTrackCfg_ +Apply to Continuous legend, select the color block style configuration item for the range. _ContinueLegendTrackCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | ------------------------------------------------------------------------------- | +| style | _object_ | - | Selected range of styles, reference [Graphic Style](/zh/docs/api/graphic-style) | + +##### values + +**optional** _number[]_ +Apply to Continuous legend, selected value. + +##### custom + +**optional** _boolean_ + +If it is a custom legend, the items property needs to be declared when this property is true. + +##### items + +**optional** _LegendItem[]_ +Apply to Classification legend, the user configures the content of the legend item. _LegendItem_ Configuration is as follows: + +| Properties | Type | Required | Description | +| ---------- | ----------- | -------- | ------------------------------------ | +| id | _string_ | | Unique value for animation or lookup | +| name | _string_ | required | name | +| value | any | required | value | +| marker | _MarkerCfg_ | | marker | + +`markdown:docs/common/marker.en.md` diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md index 9e7da131f8..2412fdc442 100644 --- a/docs/common/legend-cfg.zh.md +++ b/docs/common/legend-cfg.zh.md @@ -1,4 +1,3 @@ - ##### layout **optional** _horizontal | vertical_ @@ -46,10 +45,10 @@ **optional** _ContinueLegendHandlerCfg_ 适用于 连续图例，滑块的配置项。_ContinueLegendHandlerCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| size | _number_ | - | 滑块的大小 | -| style | _object_ | - | 滑块的样式设置，参考 [绘图属性](/zh/docs/api/graphic-style) | +| 参数名 | 类型 | 默认值 | 描述 | +| ------ | -------- | ------ | ----------------------------------------------------------- | +| size | _number_ | - | 滑块的大小 | +| style | _object_ | - | 滑块的样式设置，参考 [绘图属性](/zh/docs/api/graphic-style) | ##### itemHeight @@ -69,11 +68,11 @@ 适用于 分类图例，图例项 name 文本的配置。_LegendItemNameCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| style | _object_ | - | 文本样式配置项，参考 [绘图属性](/zh/docs/api/graphic-style) | -| spacing | _number_ | `false` | 图例项 marker 同后面 name 的间距 | -| formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | +| 参数名 | 类型 | 默认值 | 描述 | +| --------- | ---------- | ------- | ------------------------------------------------------------------- | +| style | _object_ | - | 文本样式配置项，参考  [绘图属性](/zh/docs/api/graphic-style) | +| spacing | _number_ | `false` | 图例项 marker 同后面 name 的间距 | +| formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | ##### itemSpacing @@ -87,11 +86,11 @@ 适用于 分类图例，图例项 value 附加值的配置项。_LegendItemValueCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| style | _object_ | - | 文本样式配置项，详见 [绘图属性](/zh/docs/api/graphic-style) | -| alignRight | _boolean_ | `false` | 是否右对齐，默认为 false，仅当设置图例项宽度时生效 | -| formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | +| 参数名 | 类型 | 默认值 | 描述 | +| ---------- | ---------- | ------- | ------------------------------------------------------------------- | +| style | _object_ | - | 文本样式配置项，详见  [绘图属性](/zh/docs/api/graphic-style) | +| alignRight | _boolean_ | `false` | 是否右对齐，默认为 false，仅当设置图例项宽度时生效 | +| formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | ##### animate @@ -113,11 +112,11 @@ 适用于 连续图例，文本的配置项。_ContinueLegendLabelCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| align | _string_ | - | 文本同滑轨的对齐方式
- rail ： 同滑轨对齐，在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效 | -| style | _object_ | - | 文本样式配置项，详见 [绘图属性](/zh/docs/api/graphic-style) | -| spacing | _number_ | - | 文本同滑轨的距离 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------- | +| align | _string_ | - | 文本同滑轨的对齐方式
- rail ： 同滑轨对齐，在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效 | +| style | _object_ | - | 文本样式配置项，详见  [绘图属性](/zh/docs/api/graphic-style) | +| spacing | _number_ | - | 文本同滑轨的距离 | ##### marker @@ -168,12 +167,13 @@ **optional** _ContinueLegendRailCfg_ 适用于 分类图例，图例滑轨（背景）的样式配置项。_ContinueLegendRailCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| type | _string_ | - | rail 的类型，color, size | -| size | _number_ | - | 滑轨的宽度 | -| defaultLength | _number_ | - | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | -| style | _object_ | - | 滑轨的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | +| 参数名 | 类型 | 默认值 | 描述 | +| ------------- | -------- | ------ | -------------------------------------------------------------------------------- | +| type | _string_ | - | rail 的类型，color, size | +| size | _number_ | - | 滑轨的宽度 | +| defaultLength | _number_ | - | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | +| style | _object_ | - | 滑轨的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | + ##### reversed **optional** _boolean_ @@ -190,19 +190,19 @@ 图例标题配置，默认不展示。_G2LegendTitleCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| spacing | _number_ | - | 标题同图例项的间距 | -| style | _object_ | - | 文本样式配置项，参考 [绘图属性](/zh/docs/api/graphic-style) | +| 参数名 | 类型 | 默认值 | 描述 | +| ------- | -------- | ------ | ------------------------------------------------------------ | +| spacing | _number_ | - | 标题同图例项的间距 | +| style | _object_ | - | 文本样式配置项，参考  [绘图属性](/zh/docs/api/graphic-style) | ##### track **optional** _ContinueLegendTrackCfg_ 适用于 连续图例，选择范围的色块样式配置项。_ContinueLegendTrackCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| style | _object_ | - | 选定范围的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | +| 参数名 | 类型 | 默认值 | 描述 | +| ------ | -------- | ------ | ----------------------------------------------------------- | +| style | _object_ | - | 选定范围的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | ##### values @@ -220,11 +220,11 @@ **optional** _LegendItem[]_ 适用于 分类图例，用户自己配置图例项的内容。_LegendItem_ 配置如下： -| 参数名 | 类型 | 是否必选 | 描述 | -| --- | --- | --- | --- | -| id | _string_ | | 唯一值，用于动画或者查找 | -| name | _string_ | required | 名称 | -| value | any | required | 值 | -| marker | _MarkerCfg_ | | 图形标记 | +| 参数名 | 类型 | 是否必选 | 描述 | +| ------ | ----------- | -------- | ------------------------ | +| id | _string_ | | 唯一值，用于动画或者查找 | +| name | _string_ | required | 名称 | +| value | any | required | 值 | +| marker | _MarkerCfg_ | | 图形标记 | `markdown:docs/common/marker.zh.md` diff --git a/docs/common/legend.en.md b/docs/common/legend.en.md index b50130bb41..c763871c0a 100644 --- a/docs/common/legend.en.md +++ b/docs/common/legend.en.md @@ -1,11 +1,12 @@ -配置图例有两种方式 -第一种，传入 `boolean` 设置是否显示图例。 +There are two ways to configure legends + +Method 1, pass in 'Boolean' to set whether to display a legend. ```ts -legend: false; // 关闭图例 +legend: false; // close legend ``` -第二种，传入 _LegendCfg_ 对图例进行整体配置。 +Method 2, pass in _LegendCfg_ to configure the legend as a whole. ```ts legend: { diff --git a/docs/common/line-style.en.md b/docs/common/line-style.en.md index ee57c21e68..f0583d1109 100644 --- a/docs/common/line-style.en.md +++ b/docs/common/line-style.en.md @@ -1,16 +1,16 @@ -| Attr | Type | Description | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------ | -| stroke | _string_ | color of the line | -| lineWidth | _number_ | width of the line | +| Properties | Type | Description | +| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| stroke | _string_ | color of the line | +| lineWidth | _number_ | width of the line | | lineDash | [number,number] | configure dashed line, the first parameter is the length of each segment, the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect. | -| opacity | _number_ | opacity | -| shadowColor | _string_ | shadow color | -| shadowBlur | _number_ | Gaussian blur coefficient | -| shadowOffsetX | _number_ | configure horizontal distance between shadow and line | -| shadowOffsetY | _number_ | configure vertical distance between shadow and line | -| cursor | _string_ | mouse style, same as the mouse style of CSS, default value : 'default' | +| opacity | _number_ | opacity | +| shadowColor | _string_ | shadow color | +| shadowBlur | _number_ | Gaussian blur coefficient | +| shadowOffsetX | _number_ | configure horizontal distance between shadow and line | +| shadowOffsetY | _number_ | configure vertical distance between shadow and line | +| cursor | _string_ | mouse style, same as the mouse style of CSS, default value : 'default' | Example： diff --git a/docs/common/marker.en.md b/docs/common/marker.en.md index 54ae6ebe95..ec8ffa11c5 100644 --- a/docs/common/marker.en.md +++ b/docs/common/marker.en.md @@ -1,8 +1,8 @@ -| 参数名 | 类型 | 默认值 | 描述 | -| ------- | ---------------------------- | ------ | -------------------------------- | -| symbol | _Marker_ \| _MarkerCallback_ | - | 配置图例 marker 的 symbol 形状 | -| style | ShapeAttrs | - | 图例项 marker 的配置项 | -| spacing | number | - | 图例项 marker 同后面 name 的间距 | +| Properties | Type | Default | Description | +| ---------- | ---------------------------- | ------- | ------------------------------------------------------------- | +| symbol | _Marker_ \| _MarkerCallback_ | - | The symbol shape of a legend marker is configured | +| style | ShapeAttrs | - | The configuration item of legend item Marker | +| spacing | number | - | The spacing between legend item marker and the following name | -_Marker_ 为支持的标记类型有： _circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphen_； -_MarkerCallback_ 为 `(x: number, y: number, r: number) => PathCommand`； +_Marker_ The supported tag types are： _circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphen_； +_MarkerCallback_ is `(x: number, y: number, r: number) => PathCommand`； diff --git a/docs/common/meta.en.md b/docs/common/meta.en.md index 685464b8f9..b57697deca 100644 --- a/docs/common/meta.en.md +++ b/docs/common/meta.en.md @@ -4,11 +4,11 @@ Configure the meta of each data field of the chart in global, to define the type and presentation of data. Configuration of the meta will affect the text content of all components. -| Attr | Type | Description | -| -------------- | ---------- | ------------------------------------------- | -| alias | _string_ | alias of the data field | -| formatter | _function_ | callback function to format all values of the data field | -| values | _string[]_ | enumerate all the values of the data field | -| range | _number[]_ | mapping range of the data field, default: [0,1] | - -See also the [Meta Options](/en/docs/api/options/meta) to learn more about configuration of `meta`. \ No newline at end of file +| Properties | Type | Description | +| ---------- | ---------- | -------------------------------------------------------- | +| alias | _string_ | alias of the data field | +| formatter | _function_ | callback function to format all values of the data field | +| values | _string[]_ | enumerate all the values of the data field | +| range | _number[]_ | mapping range of the data field, default: [0,1] | + +See also the [Meta Options](/en/docs/api/options/meta) to learn more about configuration of `meta`. diff --git a/docs/common/point-style.en.md b/docs/common/point-style.en.md index d02e401959..24d674ced9 100644 --- a/docs/common/point-style.en.md +++ b/docs/common/point-style.en.md @@ -1,6 +1,6 @@ -| 细分配置 | 类型 | 功能描述 | -| -------- | -------- | ---------- | -| color | _string \| string[] \| Function_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | -| shape | _string \| Function\_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | -| size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | -| style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| Properties | Type | Description | +| ---------- | -------------------------------- | --------------------------------------------------------------------------------------------- | +| color | _string \| string[] \| Function_ | The color of the data point, support callback way, example: `color: (x, y, series) => string` | +| shape | \_string \| Function\_ | The shape of the data point, support callback way, example: `shape: (x, y, series) => string` | +| size | _number \| Function_ | The size of the data point, support callback way, example: `size: (x, y, series) => number` | +| style | _object \| Function_ | Data point style, support callback way, example: `style: (x, y, series) => object` | diff --git a/docs/common/shape-style.en.md b/docs/common/shape-style.en.md index fa0a6df1f9..102bb51724 100644 --- a/docs/common/shape-style.en.md +++ b/docs/common/shape-style.en.md @@ -1,20 +1,20 @@ -| Attr | Type | Description | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fill | _string_ | Fill color of the shape | -| fillOpacity | _number_ | Fill opacity of the shape | -| stroke | _string_ | Stroke color of the shape | -| lineWidth | _number_ | The width of the stroke of the shape | +| Properties | Type | Description | +| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| fill | _string_ | Fill color of the shape | +| fillOpacity | _number_ | Fill opacity of the shape | +| stroke | _string_ | Stroke color of the shape | +| lineWidth | _number_ | The 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. | -| lineOpacity | _number_ | Opacity of the stroke | -| opacity | _number_ | Opacity of the shape | -| shadowColor | _string_ | Shadow color of the shape | -| strokeOpacity | _number_ | Stroke opacity of the shape | -| shadowBlur | _number_ | Gaussian blur coefficient of the shadow | -| shadowOffsetX | _number_ | Configure horizontal distance between shadow and shape | -| shadowOffsetY | _number_ | Configure vertical distance between shadow and shape | -| cursor | _string_ | Mouse style, same as the mouse style of CSS, default value : 'default' | +| lineOpacity | _number_ | Opacity of the stroke | +| opacity | _number_ | Opacity of the shape | +| shadowColor | _string_ | Shadow color of the shape | +| strokeOpacity | _number_ | Stroke opacity of the shape | +| shadowBlur | _number_ | Gaussian blur coefficient of the shadow | +| shadowOffsetX | _number_ | Configure horizontal distance between shadow and shape | +| shadowOffsetY | _number_ | Configure vertical distance between shadow and shape | +| cursor | _string_ | Mouse style, same as the mouse style of CSS, default value : 'default' | Example： @@ -36,4 +36,4 @@ Example： } ``` -More documents about `ShapeStyle`, see [Graphic Style](/en/docs/api/graphic-style). \ No newline at end of file +More documents about `ShapeStyle`, see [Graphic Style](/en/docs/api/graphic-style). diff --git a/docs/common/slider.en.md b/docs/common/slider.en.md index 6035bb21e0..a66089f5f1 100644 --- a/docs/common/slider.en.md +++ b/docs/common/slider.en.md @@ -1,26 +1,26 @@ -object 类型的请参考[ShapeAttrs](/en/docs/api/graphic-style) +Object type refer to [ShapeAttrs](/en/docs/ API /graphic-style) -| 配置项 | 类型 | 功能描述 | -| --------------- | -------- | ------------------ | -| start | _number_ | 默认起始位置 | -| end | _number_ | 默认结束位置 | -| height | _number_ | 缩略轴高度 | -| trendCfg | _trendCfg_ | 背景趋势的配置 | -| backgroundStyle | _object_ | 背景配置 | -| foregroundStyle | _object_ | 背景配置 | -| handlerStyle | _object_ | handle 配置 | -| textStyle | _object_ | 文本配置 | -| minLimit | _number_ | 允许滑动位置下限 | -| maxLimit | _number_ | 允许滑动位置上限 | -| formatter | _Function_ | 滑块文本格式化函数 | +| Properties | Type | Description | +| --------------- | ---------- | --------------------------------------- | +| start | _number_ | Default starting position | +| end | _number_ | Default ending position | +| height | _number_ | Slider height | +| trendCfg | _trendCfg_ | Configuration of background trends | +| backgroundStyle | _object_ | Background style | +| foregroundStyle | _object_ | Foreground style | +| handlerStyle | _object_ | Handle configuration | +| textStyle | _object_ | Text style | +| minLimit | _number_ | Lower limit of sliding position allowed | +| maxLimit | _number_ | Upper limit of sliding position allowed | +| formatter | _Function_ | Slider text formatting function | trendCfg -| 配置项 | 类型 | 功能描述 | -| --------------- | -------- | -------------- | -| data | _number[]_ | 统计文本的样式 | -| smooth | _boolean_ | 是否平滑 | -| isArea | _boolean_ | 是否面积图 | -| backgroundStyle | _object_ | 背景样式配置 | -| lineStyle | _object_ | line 样式配置 | -| areaStyle | _object_ | area 样式配置 | +| Properties | Type | Description | +| --------------- | ---------- | ------------------------------ | +| data | _number[]_ | Trend data | +| smooth | _boolean_ | Whether smooth | +| isArea | _boolean_ | Whether area | +| backgroundStyle | _object_ | Background style configuration | +| lineStyle | _object_ | Line style configuration | +| areaStyle | _object_ | Area style configuration | diff --git a/docs/common/statistic.en.md b/docs/common/statistic.en.md index cf786330a2..111f8db5c5 100644 --- a/docs/common/statistic.en.md +++ b/docs/common/statistic.en.md @@ -1,14 +1,14 @@ -| 配置项 | 类型 | 描述 | -| ------- | ---------------------- | -------- | -| title | false \| StatisticText | 标题 | -| content | false \| StatisticText | 主体内容 | +| Properties | Type | Description | +| ---------- | ---------------------- | ----------- | +| title | false \| StatisticText | title | +| content | false \| StatisticText | content | StatisticText -| 配置项 | 类型 | 描述 | -| --------- | -------- | -------------------- | -| style | object | 统计文本的样式 | -| formatter | Function | 主体文本的格式化内容 | -| rotate | number | 旋转角度 | -| offsetX | number | X 偏移值 | -| offsetY | number | Y 偏移值 | +| Properties | Type | Description | +| ---------- | -------- | --------------------------------- | +| style | object | Styles for statistical text | +| formatter | Function | The formatted content of the text | +| rotate | number | Rotation Angle | +| offsetX | number | X offset | +| offsetY | number | Y offset | diff --git a/docs/common/text-style.en.md b/docs/common/text-style.en.md index b6f4886dfa..bec1291490 100644 --- a/docs/common/text-style.en.md +++ b/docs/common/text-style.en.md @@ -1,26 +1,26 @@ -| 属性名 | 类型 | 介绍 | -| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fontSize | _number_ | 文字大小 | -| fontFamily | _string_ | 文字字体 | -| fontWeight | _number_ | 字体粗细 | -| lineHeight | _number_ | 文字的行高 | -| textAlign | _string_ | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | -| fill | _string_ | 文字的填充色 | -| fillOpacity | _number_ | 文字的填充透明度 | -| stroke | _string_ | 文字的描边 | -| lineWidth | _number_ | 文字描边的宽度 | -| lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | _number_ | 描边透明度 | -| opacity | _number_ | 文字的整体透明度 | -| shadowColor | _string_ | 文字阴影颜色 | -| shadowBlur | _number_ | 文字阴影的高斯模糊系数 | -| shadowOffsetX | _number_ | 设置阴影距文字的水平距离 | -| shadowOffsetY | _number_ | 设置阴影距文字的垂直距离 | -| cursor | _string_ | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| Properties | Type | Description | +| ------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| fontSize | _number_ | Font size | +| fontFamily | _string_ | Font family | +| fontWeight | _number_ | Font weight | +| lineHeight | _number_ | Line height | +| textAlign | _string_ | Text align, supported `center` \| `end` \| `left` \| `right` \| `start`, default `start` | +| fill | _string_ | Fill color for text | +| fillOpacity | _number_ | Fill transparency for text | +| stroke | _string_ | Stroke text | +| lineWidth | _number_ | The width of the text stroke | +| lineDash | [number,number] | For the dashed line configuration of the stroke, the first value is the length of each segment of the dashed line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke. | +| lineOpacity | _number_ | Stroke transparency | +| opacity | _number_ | Overall transparency of the text | +| shadowColor | _string_ | Shadow color | +| shadowBlur | _number_ | Shadow blur | +| shadowOffsetX | _number_ | Sets the horizontal distance between the shadow and the text | +| shadowOffsetY | _number_ | Sets the vertical distance between the shadow and the text | +| cursor | _string_ | Mouse style. With CSS mouse styles, default 'default'. | -示例代码，以 label.style 配置为例： +Example code, using label.style configuration: ```ts { diff --git a/docs/common/theme.en.md b/docs/common/theme.en.md index 5ff689c5b2..4624d08e4e 100644 --- a/docs/common/theme.en.md +++ b/docs/common/theme.en.md @@ -1 +1,125 @@ -`markdown:docs/common/theme.zh.md` \ No newline at end of file +#### Theme + +Built-in defaults: 'default' and 'dark' + +```ts +{ + theme: 'default', // 'dark', +} +``` + +#### Theme attributes + +In addition to using the built-in 'default' and 'dark' themes, you can also modify some of the theme content by setting the theme properties. + +The following table lists the specific properties on the configuration items that make up the topic: + +| Properties | Type | Description | +| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- | +| defaultColor | _string_ | Theme color | +| padding | _number_ | number[] | +| fontFamily | _string_ | Chart font | +| colors10 | _string[]_ | Category color palette, used when the number of categories is less than 10 | +| colors20 | _string[]_ | Category color palette, used when the number of categories is greater than 10 | +| columnWidthRatio | _number_ | General histogram width ratio, 0-1 range of values | +| maxColumnWidth | _number_ | Maximum width of histogram, pixel value | +| minColumnWidth | _number_ | Minimum width of histogram, pixel value | +| roseWidthRatio | _number_ | Rose width ratio, 0-1 range of value | +| multiplePieWidthRatio | number | Multilayer pie and loop ratio, 0-1 range values | +| geometries | _object_ | Configure the style of each shape for each Geometry, including the default style and the style for each state | +| components | _object_ | Configure theme samples for axes, legends, tooltips, and annotations | +| labels | _object_ | Configure the theme style of the label under Geometry | +| innerLabels | _object_ | Configure Geometry to display the Labels theme style inside the graph | +| pieLabels | _object_ | Configure the theme style of pie chart labels | + +usage: + +```ts +{ + theme: { + colors10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ]; + } +} +``` + +#### Update theme + +usage： + +```ts +// example 1: +plot.update({ theme: 'dark' }); + +// example 2: +plot.update({ theme: { defaultColor: '#FF6B3B' } }); +``` + +#### Custom theme + +In addition, G2 provides a custom topic mechanism to define a new topic structure, allowing users to switch and define chart topics. + +```ts +import { Pie, G2 } from '@antv/g2plot'; + +// Step 1: Registered theme +G2.registerTheme('new-theme', { + defaultColor: '#FF6B3B', + colors10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + colors20: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + '#2BCB95', + '#B1ABF4', + '#1D42C2', + '#1D9ED1', + '#D64BC0', + '#255634', + '#8C8C47', + '#8CDAE5', + '#8E283B', + '#791DC9', + ], +}); + +// Step 2: Usage +const piePlot = new Pie('container', { + appendPadding: 10, + data, + angleField: 'value', + colorField: 'type', + radius: 0.8, + theme: 'new-theme', +}); + +piePlot.render(); +``` diff --git a/docs/common/tooltip.en.md b/docs/common/tooltip.en.md index 2fa37bfbed..12e56a4bf9 100644 --- a/docs/common/tooltip.en.md +++ b/docs/common/tooltip.en.md @@ -2,7 +2,7 @@ **optional** _string[]_ -指定 tooltip 中显示的字段，默认不同图表有不同的默认字段列表。配合 `formatter` 配置一起使用，效果更加。 +Specifies the fields to be displayed in the Tooltip. By default, different charts have different default field lists. Use with the 'formatter' configuration for more effect. ```ts tooltip: { @@ -14,7 +14,7 @@ tooltip: { **optional** _Function_ -格式化 tooltip item 内容。 +Formats the contents of the Tooltip Item. ```ts tooltip: { @@ -28,57 +28,57 @@ tooltip: { **optional** _boolean_ _default:_ `true` -设置 tooltip 内容框是否跟随鼠标移动。 +Sets whether the Tooltip content box follows the mouse. ##### enterable **optional** _boolean_ _default:_ `false` -tooltip 是否允许鼠标滑入。 +Whether the tooltip allows mouse to slide in. ##### showTitle **optional** _boolean_ _default:_ `false` -是否展示 tooltip 标题。 +Whether show tooltip title. ##### title **optional** _string_ -设置 tooltip 的标题内容：如果值为数据字段名，则会展示数据中对应该字段的数值，如果数据中不存在该字段，则直接展示 title 值。 +Set the title content of the Tooltip: If the value is the name of the data field, the value for the field in the data is displayed, and if the field does not exist in the data, the title value is displayed directly. ##### position **optional** _`top` | `bottom` | `left` | `right`_ -设置 tooltip 的固定展示位置，相对于数据点。 +Sets the fixed display location of the Tooltip relative to the data point. ##### shared **optional** _boolean_ -true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容。 +True means that all data corresponding to the current point is merged and displayed, while false means that only the data content closest to the current point is displayed. ##### showCrosshairs **optional** _boolean_ _default:_ `false` -是否展示 crosshairs。 +Whether show crosshairs。 ##### crosshairs **optional** _object_ -配置 tooltip 的 crosshairs，当且仅当 `showCrosshairs` 为 true 时生效。 +Configure tooltip crosshairs to work if and only if 'showCrosshairs' is true. -| 细分配置项名称 | 类型 | 功能描述 | -| -------------- | ---------------------- | ------------------------------------------------------------------- | -| type | \_`x` \| `y` \| `xy`\_ | crosshairs 的类型: `x` 表示 x 轴上的辅助线，`y` 表示 y 轴上的辅助项 | -| line | _lineStyle_ | 线的配置项 | -| text | _textStyle_ | 辅助线文本配置，支持回调 | -| textBackground | _textBackgroundStyle_ | 辅助线文本背景配置 | -| follow | _boolean_ | 辅助线是否跟随鼠标移动，默认为 false，即定位到数据点 | +| Properties | Type | Description | +| -------------- | ---------------------- | --------------------------------------------------------------------------------------------- | +| type | \_`x` \| `y` \| `xy`\_ | Crosshairs Type: 'X' represents the auxiliary line on the X axis, 'Y' on the Y axis | +| line | _lineStyle_ | The configuration item for line | +| text | _textStyle_ | Guideline text configuration, support callback | +| textBackground | _textBackgroundStyle_ | Guideline text background configuration | +| follow | _boolean_ | Whether the guide line follows the mouse. Default is false, that is, to locate the data point | **_lineStyle_** @@ -90,10 +90,10 @@ true 表示合并当前点对应的所有数据并展示，false 表示只展示 **_textBackgroundStyle_** -| 细分配置项名称 | 类型 | 功能描述 | -| -------------- | ------------------ | ------------------ | -| padding | _number \| number[]_ | 文本背景周围的留白 | -| style | _shapeStyle_ | 线的配置项 | +| Properties | Type | Description | +| ---------- | -------------------- | ------------------------------------------- | +| padding | _number \| number[]_ | White space around the background of a text | +| style | _shapeStyle_ | The configuration item for line | **_shapeStyle_** @@ -103,46 +103,46 @@ true 表示合并当前点对应的所有数据并展示，false 表示只展示 **optional** _boolean_ _default:_ `true` -是否渲染 tooltipMarkers。 +Whether to render TooltipMarkers. ##### marker **optional** _object_ -tooltipMarker 的样式配置。 +TooltipMarker style configuration. ##### showContent **optional** _boolean_ _default:_ `false` -是否展示 tooltip 内容框。 +Whether to display the Tooltip content box. ##### container **optional** _string|HTMLElement_ -自定义 tooltip 的容器。 +Custom tooltip container. ##### containerTpl **optional** _string_ -用于指定图例容器的模板，自定义模板时必须包含各个 dom 节点的 class。 +Templates used to specify the legend container must include the classes of each DOM node when customizing the template ##### itemTpl **optional** _string_ -每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。 +The default template for each record, which must include the classes of each DOM node when customizing the template. ##### domStyles **optional** _TooltipDomStyles_ -传入各个 dom 的样式。 +The styles for each DOM. ```ts -/** Tooltip 内容框的 css 样式定义 */ +/** Tooltip content box css style */ { domStyles: { 'g2-tooltip'?: object; @@ -160,13 +160,13 @@ tooltipMarker 的样式配置。 **optional** _number_ -tooltip 偏移量。 +Tooltip offset. ##### customContent **optional** _Function_ -支持自定义模板。 +Support for custom templates. ```ts { diff --git a/docs/common/xy-field.en.md b/docs/common/xy-field.en.md index ac169fa8d6..7d9f605b4d 100644 --- a/docs/common/xy-field.en.md +++ b/docs/common/xy-field.en.md @@ -1 +1,11 @@ -`markdown:docs/common/xy-field.zh.md` \ No newline at end of file +#### xField + +**required** _string_ + +The name of the data field corresponding to the graph in the x direction, usually the field corresponding to the horizontal coordinate axis. For example, to see how many people are in different classes, the class field is the corresponding xField. + +#### yField + +**required** _string_ + +The name of the data field corresponding to the graph in the y direction, usually the field corresponding to the vertical coordinate axis. For example, to see the number of students in different classes, the number field is the corresponding yField. diff --git a/docs/manual/upgrade.en.md b/docs/manual/upgrade.en.md index f671b3bbd3..d26f81e0fa 100644 --- a/docs/manual/upgrade.en.md +++ b/docs/manual/upgrade.en.md @@ -9,24 +9,24 @@ G2Plot 2.0 is under continuous development. Up to now, we have completed the dev ## Abandoned charts -| Chart name | Description | Example | -| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/bubble#quadrant) | -| StackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Column](../../examples/column/stacked) | -| GroupedColumn | 改用 Column 实现。
删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true`。 | [Column](../../examples/column/grouped) | -| PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Column](../../examples/column/percent) | -| RangeColumn | 改用 Column 实现。
删除 stackField 配置，需要指定 `isRange: true`。
label 不再支持 topStyle、bottomStyle，详细配置请参考 [API](../../examples/column/range/API#label) 文档。 | [Column](../../examples/column/range#basic) | -| StackedBar | 改用 Bar 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Bar](../../examples/bar/stacked) | -| PercentStackedBar | 改用 Bar 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Bar](../../examples/bar/percent) | -| RangeBar | 改用 Bar 实现。
删除 stackField 配置，需要指定 `isRange: true`。
label 不再支持 topStyle、bottomStyle，详细配置请参考 [API](../../examples/bar/range/API#label) 文档 | [Bar](../../examples/bar/range#basic) | -| Donut | 改用 Pie 实现，修改图表名称即可。 | [Pie](../../examples/pie/donut) | -| DualLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/dual-line) | -| ColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/column-line) | -| StackedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/stacked-column-line) | -| GroupedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/grouped-column-line) | -| StackedArea | 改用 Area 实现。
去掉 stackField ，改用 seriesField。 | [Area](../../examples/area/stacked) | -| PercentStackedArea | 改用 Area 实现。去掉 stackField ，改用 seriesField ，需要指定 `isPercent: true`。 | [Area](../../examples/area/percent) | -| StepLine | 改用 Line 实现，需要指定 stepType。
1.0 版版本可以使用默认 step ，2.0 版本必须手动指定 stepType（hv, vh, hvh, vhv）， | [Line](../../examples/line/step) | +| Chart name | Description | Example | +| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/bubble#quadrant) | +| StackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Column](../../examples/column/stacked) | +| GroupedColumn | 改用 Column 实现。
删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true`。 | [Column](../../examples/column/grouped) | +| PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Column](../../examples/column/percent) | +| RangeColumn | 改用 Column 实现。
删除 stackField 配置，需要指定 `isRange: true`。
label 不再支持 topStyle、bottomStyle，详细配置请参考 [API](../../examples/column/range/API#label) 文档。 | [Column](../../examples/column/range#basic) | +| StackedBar | 改用 Bar 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Bar](../../examples/bar/stacked) | +| PercentStackedBar | 改用 Bar 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Bar](../../examples/bar/percent) | +| RangeBar | 改用 Bar 实现。
删除 stackField 配置，需要指定 `isRange: true`。
label 不再支持 topStyle、bottomStyle，详细配置请参考 [API](../../examples/bar/range/API#label) 文档 | [Bar](../../examples/bar/range#basic) | +| Donut | 改用 Pie 实现，修改图表名称即可。 | [Pie](../../examples/pie/donut) | +| DualLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/dual-line) | +| ColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/column-line) | +| StackedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/stacked-column-line) | +| GroupedColumnLine | 改用 DualAxes 实现。 | [Demos](../../examples/dual-axes/grouped-column-line) | +| StackedArea | 改用 Area 实现。
去掉 stackField ，改用 seriesField。 | [Area](../../examples/area/stacked) | +| PercentStackedArea | 改用 Area 实现。去掉 stackField ，改用 seriesField ，需要指定 `isPercent: true`。 | [Area](../../examples/area/percent) | +| StepLine | 改用 Line 实现，需要指定 stepType。
1.0 版版本可以使用默认 step ，2.0 版本必须手动指定 stepType（hv, vh, hvh, vhv）， | [Line](../../examples/line/step) | ## Configuration change @@ -34,32 +34,32 @@ G2Plot 2.0 is compatible with most of the chart functions and configuration item ### General attributes -| Attributes | Description | Example | -| ----------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -| title | 不再支持 | - | -| description | 不再支持 | - | -| forceFit | 不再支持，改用 autoFit | - | -| responsive | 不再支持，内置 | - | +| Properties | Description | Example | +| ----------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| title | 不再支持 | - | +| description | 不再支持 | - | +| forceFit | 不再支持，改用 autoFit | - | +| responsive | 不再支持，内置 | - | | guideLine | 不再支持，改用 [annotations](../../examples/general/annotation) 实现。 | - | -| label | label.type 会有兼容性问题，如果报错修改 type 配置或者去掉 | - | -| slider | 写法变更 | 示例 | -| scrollbar | 写法变更 | 示例 | -| events | 写法变更 | 示例 | -| visible | 写法变更 | 示例 | -| animation | 写法变更 | 示例 | +| label | label.type 会有兼容性问题，如果报错修改 type 配置或者去掉 | - | +| slider | 写法变更 | 示例 | +| scrollbar | 写法变更 | 示例 | +| events | 写法变更 | 示例 | +| visible | 写法变更 | 示例 | +| animation | 写法变更 | 示例 | ### Private configuration -| Chart name | Description | Example | -| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| Chart name | Description | Example | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | | Scatter | pointSize: 不再支持，改用 size。
shape: 去掉默认类型 circle，需要显性设置。
trendline: 不再支持，改用 regressionLine，删除 showConfidence、confidenceStyle 配置，新增 algorithm 配置 | - | -| Rose | categoryField: 不再支持，改用 xField。
radiusField: 不再支持，改用 yField。
colorField: 不再支持，改用 seriesField。 | - | -| Bullet | 改动较大，详细参考 [Bullet](../../examples/progress-plots/bullet) | - | -| WordCloud | maskImage: 不再支持， 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。
data 不再做限制，但需要指定 wordField、weightField。 | - | -| TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | -| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/progress-plots/gauge#basic) | 示例 | -| Radar | 删除 radiusAxis ，改用 yAxis。
删除 angleField ， 改用 xField。
删除 radiusField ， 改用 yField。 | - | -| Liquid | 删除 min 、max。
删除 value ，改用 percent。
更新 statistic。 | 示例 | +| Rose | categoryField: 不再支持，改用 xField。
radiusField: 不再支持，改用 yField。
colorField: 不再支持，改用 seriesField。 | - | +| Bullet | 改动较大，详细参考 [Bullet](../../examples/progress-plots/bullet) | - | +| WordCloud | maskImage: 不再支持， 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。
data 不再做限制，但需要指定 wordField、weightField。 | - | +| TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | +| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/progress-plots/gauge#basic) | 示例 | +| Radar | 删除 radiusAxis ，改用 yAxis。
删除 angleField ， 改用 xField。
删除 radiusField ， 改用 yField。 | - | +| Liquid | 删除 min 、max。
删除 value ，改用 percent。
更新 statistic。 | 示例 | ## Problems