javascript - recharts 在 MultiBarChart 中沿 Y 轴的每个条形图添加关闭按钮以关闭条形图

Question

我需要沿着 Y 轴显示的每个栏添加一个十字按钮，这将有助于用户关闭栏。我遵循垂直布局，条形图将沿 Y 轴放置。我尝试使用 LabelList 添加它但无法实现。有人可以建议我如何实现吗？

Answer 1

看起来您正在尝试做的是沿 y 轴创建自定义 tickFormatter。您说您曾尝试使用 LabelList 添加十字 - 您是否尝试过使用 tickFormatter 创建可以显示的自定义刻度？我会亲自尝试它，直到它以我想要的方式出现。

然后，我会想到当用户点击十字图标时，我需要做什么才能让栏“关闭”。

我会做一个 display none 吗？我会使用 Array.prototype.splice 在特定索引处删除它吗？

我会在这里仔细查看重新绘制图表的 Y 轴文档 ---> http://recharts.org/en-US/api/YAxis

我还建议查看定制的条形图事件以查看其 onClick 的使用方式 ---> http://recharts.org/en-US/examples/BarChartWithCustomizedEvent

我认为您应该尝试使用 tickFormatter 而不是使用 LabelList，因为从 LabelList 的外观来看，它应该用在条形组件上 ---> http://recharts.org/en-US/api/LabelList

使用 tickFormatter 时，这会影响图表侧面的刻度线，您可以对其进行格式化，使刻度线不显示数字，但会显示您提到的十字图标，然后创建自定义工具提示显示数字。

我希望这不会太长和令人困惑并且有点帮助:)