antvis/G2

ElementHighlight 交互需要将激活 element 元素提到第一层级 #4441

visiky posted onGitHub

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

const chart = new Chart({
  container: "container",
  width: 320,
  height: 320
});

chart.coordinate({ type: "theta", outerRadius: 0.8 });

chart
  .data([
    { id: "中后台", value: 33355 },
    { id: "移动端", value: 70143 },
    { id: "服务端", value: 11433 },
    { id: "营销活动", value: 2433 },
    { id: "文档和官网", value: 2433 }
  ])
  .interaction({ type: "tooltip" })
  .interaction({ type: "elementHighlight" });

chart
  .interval()
  .transform({ type: "stackY" })
  .encode("y", "value")
  .encode("color", "id")
  .label({
    text: "value",
    fontWeight: "bold",
    position: "outside",
    transform: [{ type: "spider", edgeDistance: 20 }, { type: "dodgeY" }]
  })
  .style("stroke", "#fff")
  .style("lineWidth", 1)
  .legend(false)
  .encode("enterType", "waveIn")
  .encode("updateType", "waveIn");

chart.render();

可以看到黑色描边少了一条。这种 case 之前在 4.0 的时候也修复过,需要将激活的元素层级提前,取消交互选中之后,还原层级 <img width="372" alt="image" src="https://user-images.githubusercontent.com/15646325/206661072-50cdd800-4634-4bc1-b535-787bb6239b51.png">


其实这个地方配置 highlightedZIndex 就可以了:

chart.interaction({
  type: 'elementHighlight',
  highlightedZIndex: 1,
  highlightedStroke: 'black',
});
posted by pearmini over 2 years ago

Fund this Issue

$0.00
Funded

Pull requests