Skip to content

Commit

Permalink
fix: label formatter callback params (#5062)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pepper-nice
pepper-nice committed May 23, 2023
1 parent c8b62f6 commit 1ee4b1f
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 27 deletions.
4 changes: 3 additions & 1 deletion __tests__/plots/static/alphabet-interval-label-overflow-hide.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ export function alphabetIntervalLabelOverflowHide(): G2Spec {
{
text: 'frequency',
position: 'inside',
formatter: '.0%',
formatter: (_, datum) => {
return (datum.frequency * 100).toFixed(0) + '%';
},
transform: [{ type: 'overflowHide' }],
},
],
Expand Down
51 changes: 26 additions & 25 deletions site/docs/spec/label/overview.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,31 +53,32 @@ chart.render();

Label 继承 G Text 所有属性样式配置，此外还有 `position`, `selector`, `connector`, `background` 和 `transform` 等更多配置。

| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------- |
| fontSize | 文字大小 | `number` \| `Function<number>` | - |
| fontFamily | 文字字体 | `string` \| `Function<string>` | - |
| fontWeight | 字体粗细 | `number` \| `Function<number>` | - |
| lineHeight | 文字的行高 | `number` \| `Function<number>` | - |
| textAlign | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | `string` \| `Function<string>` | - |
| textBaseline | 设置在绘制文本时使用的当前文本基线, 支持的属性:`top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`。默认值为`bottom` | `string` \| `Function<string>` | - |
| fill | 图形的填充色 | `string` \| `Function<string>` | - |
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - |
| stroke | 图形的描边 | `string` \| `Function<string>` | - |
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - |
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - |
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - |
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - |
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - |
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - |
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - |
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - |
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' |
| position | 标签位置配置 | `string` | - |
| selector | 标签选择器。mark 通过指定的通道分组，通过指定选择器可以针对序列进行过滤索引，从序列中提取单个或多个值。分组的默认通道是系列。 | `string\|function` | - |
| connector | 是否展示文本和目标点之间的连接线，默认不展示 | `boolean` | - |
| background | 是否展示文本背景框，默认不展示 | `boolean` | - |
| transform | 标签转换，主要用于调整标签 `(x,y)` 位置，标签偏移、对齐等属性以实现想要的标签效果，内置多种标签布局，同时也支持回调的方式处理 | `array\|function` | - |
| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | --------- |
| fontSize | 文字大小 | `number` \| `Function<number>` | - |
| fontFamily | 文字字体 | `string` \| `Function<string>` | - |
| fontWeight | 字体粗细 | `number` \| `Function<number>` | - |
| lineHeight | 文字的行高 | `number` \| `Function<number>` | - |
| textAlign | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | `string` \| `Function<string>` | - |
| textBaseline | 设置在绘制文本时使用的当前文本基线, 支持的属性:`top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`。默认值为`bottom` | `string` \| `Function<string>` | - |
| fill | 图形的填充色 | `string` \| `Function<string>` | - |
| fillOpacity | 图形的填充透明度 | `number` \| `Function<number>` | - |
| stroke | 图形的描边 | `string` \| `Function<string>` | - |
| strokeOpacity | 描边透明度 | `number` \| `Function<number>` | - |
| lineWidth | 图形描边的宽度 | `number` \| `Function<number>` | - |
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` \| `Function<[number, number]>` | - |
| opacity | 图形的整体透明度 | `number` \| `Function<number>` | - |
| shadowColor | 图形阴影颜色 | `string` \| `Function<string>` | - |
| shadowBlur | 图形阴影的高斯模糊系数 | `number` \| `Function<number>` | - |
| shadowOffsetX | 设置阴影距图形的水平距离 | `number` \| `Function<number>` | - |
| shadowOffsetY | 设置阴影距图形的垂直距离 | `number` \| `Function<number>` | - |
| cursor | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | `string` \| `Function<string>` | 'default' |
| position | 标签位置配置 | `string` | - |
| selector | 标签选择器。mark 通过指定的通道分组，通过指定选择器可以针对序列进行过滤索引，从序列中提取单个或多个值。分组的默认通道是系列。 | `string\|function` | - |
| connector | 是否展示文本和目标点之间的连接线，默认不展示 | `boolean` | - |
| background | 是否展示文本背景框，默认不展示 | `boolean` | - |
| transform | 标签转换，主要用于调整标签 `(x,y)` 位置，标签偏移、对齐等属性以实现想要的标签效果，内置多种标签布局，同时也支持回调的方式处理 | `array\|function` | - |
| formatter | 标签文本格式化 | `type Formatter = (text:string, datum: Datum, index:number, data: Data) => string` | - |

标签**连接线样式**配置，格式为: `connector${style}`, 如: `connectorStroke` 代表连接线描边色。

Expand Down
2 changes: 1 addition & 1 deletion src/runtime/plot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1082,7 +1082,7 @@ function createLabelShapeFunction(
);
const { shape = defaultLabelShape, text, ...style } = visualOptions;
const f = typeof formatter === 'string' ? format(formatter) : formatter;
const value = { ...style, text: f(text) };
const value = { ...style, text: f(text, datum, index, abstractData) };
const shapeFunction = useShape({ type: `label.${shape}`, ...style });
return shapeFunction(points, value, coordinate, theme, point2d);
};
Expand Down

0 comments on commit 1ee4b1f

Please sign in to comment.