Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add standard chart mount function #6705

Open
wants to merge 1 commit into
base: v5
Choose a base branch
from
Open

Conversation

moayuisuda
Copy link
Collaborator

Checklist
  • npm test passes
  • commit message follows commit guidelines
  • documents are updated
Description of change

之前文档中的手动挂载方法
image
appendChild 后实例内部 _container 没有更新,autoFit 那些功能都会失效,加一个标准 mount 方法,用来异步挂载

@hustcc
Copy link
Member

hustcc commented Mar 25, 2025

这个 api 怎么使用?确定一定需要增加 api 吗?

@coveralls
Copy link

Pull Request Test Coverage Report for Build 14054540911

Details

  • 0 of 7 (0.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.04%) to 86.657%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/api/runtime.ts 0 7 0.0%
Totals Coverage Status
Change from base Build 14051229873: -0.04%
Covered Lines: 10634
Relevant Lines: 11897

💛 - Coveralls

@moayuisuda
Copy link
Collaborator Author

这个 api 怎么使用?确定一定需要增加 api 吗?

比如我在 react 里要先同步拿到 chart 实例干一些事情,但是实际的挂载只能在 useEffect 里

useEffect(() => {
  chart.mount(container.current)
}, [])

不增加 api,就得用户手动 plot._container = container 和 forceFit 了,我没看到有其他的 api 可以设置这个内部的 _container 属性

@hustcc
Copy link
Member

hustcc commented Mar 25, 2025

为啥要 mount 到其他 dom 中,不是 new Chart 的时候传入 dom 嘛?

@moayuisuda
Copy link
Collaborator Author

const chart = useMemo(() => new Chart(...), []); // 这时候 ref.current 为空,没法传进去
const options = chart.options();
...同步拿到options,做一些事情

useEffect(() => {
  chart.mount(ref.current)
}, [])

return <div ref={ref}></div>

主要官网这个手动挂载的文档里,挂载了也没法自适应容器,是个不完备的挂载
image

@hustcc
Copy link
Member

hustcc commented Mar 25, 2025

为啥不是拿到 options 后,处理之后再调用 .options 然后 render?

@moayuisuda
Copy link
Collaborator Author

现在我这有个 g2 react 容器,会把 chart 实例作为上下文让整个业务图表容器共享,初始化时会根据 chart.options 生成一些图表上的组件,这些组件会占用图表容器的空间,生成这些组件后,再在 useEffect 里进行图表的实际挂载,这时图表就会自动占满剩下的空间。
image

如果是放在 useEffect 里才生成 Chart 实例+挂载,这时容器内各种组件都还没生成,图表就会先占满整个容器,接着生成容器内组件,这时空间就不够了,这些生成的组件就会把图表挤出容器。

除了上面业务代码里的场景外,我也并不想因为 react/vue 框架 dom ref 本身异步的原因,把 chart 实例也变成一个必须要 useEffect 里异步后才能获取的东西。

文档里提及了手动挂载,但挂载后又丢失 autoFit 特性,如果这个是预期的,也觉得手动挂载这种场景太小众不用专门 api,我就业务里自己更改 _container 不提供专门 api 了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants