如何将 Recharts 图表与非 Recharts 图表的自定义内容同步
How to sync Recharts chart with something custom that is not a Recharts graph
目前,您可以使用 syncId
属性 轻松同步两个图表,例如 in this fiddle.
我想用 D3 在 Recharts 范围之外设计一些东西。是否可以捕获事件或回调,让我可以像两个 Recharts 组件一样同步我的自定义组件?
谢谢
抱歉,问题问得太快了,请花时间深入搜索。 AFAIK,这不是写在文档中和鼓励的东西,但你完全可以依靠内部事件发射器来监听同步事件并触发同步事件。
我的代码
import { eventCenter, SYNC_EVENT } from 'recharts/lib/util/Events';
// [...]
eventCenter.on(SYNC_EVENT, (cId, chartId, data) => {
console.log(cId, chartId, data);
});
// [...]
@guillaumepotier,你测试过你的方法了吗?
据我所知,您不能在导入 eventCenter 后触发事件,因为您不会获得与 recharts 图表相同的实例。每次导入 returns 一个新的 eventcenter 实例,所以即使你触发了事件,图表也不会收到它,因为它不是同一个 eventcenter。
目前,您可以使用 syncId
属性 轻松同步两个图表,例如 in this fiddle.
我想用 D3 在 Recharts 范围之外设计一些东西。是否可以捕获事件或回调,让我可以像两个 Recharts 组件一样同步我的自定义组件?
谢谢
抱歉,问题问得太快了,请花时间深入搜索。 AFAIK,这不是写在文档中和鼓励的东西,但你完全可以依靠内部事件发射器来监听同步事件并触发同步事件。
我的代码
import { eventCenter, SYNC_EVENT } from 'recharts/lib/util/Events';
// [...]
eventCenter.on(SYNC_EVENT, (cId, chartId, data) => {
console.log(cId, chartId, data);
});
// [...]
@guillaumepotier,你测试过你的方法了吗?
据我所知,您不能在导入 eventCenter 后触发事件,因为您不会获得与 recharts 图表相同的实例。每次导入 returns 一个新的 eventcenter 实例,所以即使你触发了事件,图表也不会收到它,因为它不是同一个 eventcenter。