自定义 shape 无法使用默认的 label、toolltip 等配置 #5901

lxfu1 posted onGitHub

问题描述

在官网示例添加如下代码，发现label全部绘制在左上角了，位置不对

  .label({
    text: 'sales',
    formatter: '.1%',
  })

重现链接

No response

重现步骤

No response

预期行为

No response

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

可能是 group 的包围盒计算不准确？

posted by pearmini over 1 year ago

这个问题解决了吗

posted by xyr550 10 months ago

写成children的形式，children[0] 是绘制柱形图，children[1]是绘制label文本，可以参考：

chart.options({ autoFit: true, // 图表的宽高和容器保持一致 data: data, children: [ { type: "interval", // 标记节点 encode: { x: "month", y: "count", shape: "column25d", }, axis: { x: { labelFill: "#fff", labelOpacity: 1, title: false, // 不显示标题 line: false, // 不显示轴线 tickLine: false, // 不显示刻度线 tick: false, // 不显示刻度 }, y: false, // 不显示y轴 }, }, { type: "text", // 子视图类型为 'text'，表示文本标签 data: data, encode: { x: "month", y: "count", text: "count" }, // 数据编码配置，x 轴对应 'month' 字段，y 轴对应 'count' 字段，文本内容为 'count' 字段的值 style: { fill: "#fff", textAlign: "center", dy: -20 }, // 文本样式配置，填充颜色为黑色，文本水平居中，y 方向上偏移 -5 像素 }, ] });

posted by HalfTalking about 1 month ago

Fund this Issue

$0.00

Funded

Only logged in users can fund an issue

Pull requests

Do you want to work on this issue?

自定义 shape 无法使用默认的 label、toolltip 等配置 #5901

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect