在使用spaceLayer的情况下 给layer加上text()后会导致tooltip展示不出,是什么问题

[asz97665]

问题描述

import { Chart } from '@antv/g2';

const data = [ { item: '事例一', count: 40 }, { item: '事例二', count: 21 } ];

const chart = new Chart({ container: 'container', autoFit: true, }); const layer = chart.spaceLayer()

layer .interval() .data(data) .coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 }) .transform({ type: 'stackY' }) .encode('y', 'count') .encode('color', 'item') .legend('color', { position: 'bottom', itemMarker: 'circle', layout: { justifyContent: 'center' } }) .tooltip((data) => ({ name: data.item, value: data.count, }));

layer .text() .style('text', '主机') // Relative position .style('x', '50%') .style('y', '50%') .style('dy', -25) .style('fontSize', 34) .style('fill', '#8c8c8c') .style('textAlign', 'center')

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

第二个 text layer 会叠在第一个上面，这个需求用一个 view 就行了，不用 layer。

import { Chart } from "@antv/g2";

const data = [
  { item: "事例一", count: 40 },
  { item: "事例二", count: 21 },
];

const chart = new Chart({
  container: "container",
  autoFit: true,
});

chart
  .interval()
  .data(data)
  .coordinate({ type: "theta", outerRadius: 0.8, innerRadius: 0.5 })
  .transform({ type: "stackY" })
  .encode("y", "count")
  .encode("color", "item")
  .legend("color", { position: "bottom", itemMarker: "circle", layout: { justifyContent: "center" } })
  .tooltip((data) => ({
    name: data.item,
    value: data.count,
  }));

chart
  .text()
  .style("text", "主机")
  .style("x", "50%")
  .style("y", "50%")
  .style("fontSize", 34)
  .style("fill", "#8c8c8c")
  .style("textAlign", "center");

chart.render();