chartJS插件的文档可以在here上找到,但是它是不完整的,因为没有对每个钩子的完整描述:
- 第一个月
beforeUpdate (cancellable)
个afterUpdate
个beforeLayout (cancellable)
个afterLayout
个beforeDatasetsUpdate (cancellable)
个afterDatasetsUpdate
个beforeDatasetUpdate (cancellable)
个afterDatasetUpdate
个beforeRender (cancellable)
afterRender
个beforeDraw (cancellable)
个afterDraw
个beforeDatasetsDraw (cancellable)
个afterDatasetsDraw
个beforeDatasetDraw (cancellable)
个afterDatasetDraw
个beforeEvent (cancellable)
个afterEvent
个resize
destroy
个
这个列表可以总结为以下函数,但顺序对我来说不清楚:
- 更新
- 布局
- 数据集更新
- 数据集更新
- 渲染
- 画
- 数据集绘制
- DatasetDraw
- 事件
- 调整大小
- 摧毁
有些名字可能知道钩子的执行顺序。
用例
我想在图表上实现几个行为,这些行为在数据的某些条件下激活,例如,我想在没有数据可用时更新图例标签,因此,它不会在图例中显示 * 类别 * 的名称,而是显示一条消息说 * 没有数据 。
可以肯定的是, 我已经设法实现插件 *,但由于顺序对我来说不清楚,我一直把事情搞混了。
2条答案
按热度按时间sg3maiej1#
我在代码中找到了每个钩子的内部文档(见下面的美化版本)。不完全是顺序,但它可以帮助弄清楚。
请注意,有些钩子有相同的名称,但它们的参数不同(您可以直接在代码中检查这些参数:
beforeInit
:在初始化chart
之前调用。afterInit
:在chart
初始化之后和第一次更新之前调用。beforeUpdate
:在更新chart
之前调用。如果任何插件返回false
,则更新(以及后续渲染)将被取消,直到触发另一个update
。afterUpdate
:在chart
更新之后和渲染之前调用。注意如果图表更新之前已经取消,则不会调用此钩子。beforeDatasetsUpdate
:在更新chart
数据集之前调用。如果任何插件返回false
,则取消数据集更新,直到触发另一个update
。@自版本2.1.5起afterDatasetsUpdate
:在chart
数据集更新后调用。请注意,如果数据集更新之前已取消,则不会调用此钩子。beforeDatasetUpdate
:在args.index
上更新chart
数据集之前调用。如果任何插件返回false
,则数据集更新将被取消,直到触发另一个update
。afterDatasetUpdate
:在给定args.index
的chart
数据集更新后调用。注意,如果数据集更新之前已取消,则不会调用此钩子。beforeLayout
:在布局chart
之前调用。如果任何插件返回false
,则取消布局更新,直到触发另一个update
。afterLayout
:在chart
布局完成后调用。注意,如果布局更新已经取消,则不会调用此钩子。beforeRender
:在渲染chart
之前调用。如果任何插件返回false
,则取消渲染,直到触发另一个render
。afterRender
:在chart
被完全渲染(并且动画完成)之后调用。注意,如果渲染之前被取消,则不会调用此钩子。beforeDraw
:在绘制chart
之前,在给定的缓动值指定的每个动画帧处调用。如果任何插件返回false
,则帧绘制被取消,直到另一个render
被触发。afterDraw
:在chart
已经为特定的缓动值绘制之后调用。注意,如果之前已经取消了绘制,则不会调用此钩子。beforeDatasetsDraw
:在绘制chart
数据集之前调用。如果任何插件返回false
,则取消绘制数据集,直到触发另一个render
。afterDatasetsDraw
:在chart
数据集绘制完成后调用。请注意,如果数据集绘制之前已取消,则不会调用此钩子。beforeDatasetDraw
:在给定args.index
处绘制chart
数据集之前调用(数据集以相反的顺序绘制)。如果任何插件返回false
,则取消数据集绘制,直到触发另一个render
。afterDatasetDraw
:在给定args.index
上的chart
数据集绘制完成后调用(数据集以相反的顺序绘制)。注意,如果数据集绘制之前已取消,则不会调用此钩子。beforeTooltipDraw
:在绘制tooltip
之前调用。如果任何插件返回false
,则取消绘制工具提示,直到触发另一个render
。afterTooltipDraw
:在绘制tooltip
后调用。注意,如果之前取消了工具提示绘制,则不会调用此钩子。beforeEvent
:在处理指定的event
之前调用。如果任何插件返回false
,则该事件将被丢弃。afterEvent
:在event
被消耗后调用。注意,如果event
之前被丢弃,则不会调用此钩子。resize
:在图表调整大小后调用。destroy
:在图表被销毁后调用。kcugc4gi2#
这是一个老问题,但在chart.js 4.4.0中,你可以通过单步执行Chart类(https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js)来获得顺序感,它的结果是:
1.重置(如果禁用动画)
1.数据集更新之前
1.数据集更新
1.数据集更新后
1.更新后
1.数据集绘制之前
1.后数据集绘制
before/afterInit和before/afterEvent钩子将在上述钩子和before/afterDestroy之前发生。