Chart.js的钩子(插件)执行的顺序是什么?

jum4pzuy  于 11个月前  发布在  Chart.js
关注(0)|答案(2)|浏览(128)

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
  • 事件
  • 调整大小
  • 摧毁

有些名字可能知道钩子的执行顺序。

用例

我想在图表上实现几个行为,这些行为在数据的某些条件下激活,例如,我想在没有数据可用时更新图例标签,因此,它不会在图例中显示 * 类别 * 的名称,而是显示一条消息说 * 没有数据
可以肯定的是,
我已经设法实现插件 *,但由于顺序对我来说不清楚,我一直把事情搞混了。

sg3maiej

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.indexchart数据集更新后调用。注意,如果数据集更新之前已取消,则不会调用此钩子。
  • 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:在图表被销毁后调用。
kcugc4gi

kcugc4gi2#

这是一个老问题,但在chart.js 4.4.0中,你可以通过单步执行Chart类(https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js)来获得顺序感,它的结果是:

  1. beforeUpdate
  2. BeforeElements更新
  3. beforeLayout
  4. afterLayout
    1.重置(如果禁用动画)
    1.数据集更新之前
    1.数据集更新
  5. afterDatasetUpdate
    1.数据集更新后
    1.更新后
  6. beforeRender
  7. beforeDraw
    1.数据集绘制之前
  8. beforeDatasetDraw
  9. afterDatasetDraw
    1.后数据集绘制
  10. afterDraw
  11. afterRender
    before/afterInit和before/afterEvent钩子将在上述钩子和before/afterDestroy之前发生。

相关问题