如何在ChartJS的onClick事件处理执行完成后运行自定义代码

针对ChartJS点击回调后置执行的需求，提供三个可落地的实现方案，按优先级从高到低排列：

方案1：直接包装原有点击处理函数（最推荐） #

直接对配置给ChartJS的onClick函数做一层封装，在原有逻辑执行完成后追加你的后置代码，可控性最高、无兼容问题：

// 原有点击处理函数
function chartOnClickHandler(e) {
    if (e.native.detail !== 2) return;
    if (e.native.target.style.cursor === 'default') {
        handleDoubleClickAddPoint(e);
    } else if (e.native.target.style.cursor === 'grab'){
        handleDoubleClickRemovePoint(e);
    }
}

// 定义你的后置执行逻辑
function afterChartClickHandle(e) {
    // 此处可访问更新后的图表数据
    console.log('图表已更新', yourChartInstance.data);
}

// 包装生成新的处理函数
const wrappedChartOnClick = (e, elements, chartInstance) => {
    // 先执行原有逻辑
    chartOnClickHandler(e);
    // 再执行后置逻辑
    afterChartClickHandle(e);
}

// ChartJS初始化配置中使用包装后的函数
const chart = new Chart(ctx, {
    // 其他图表配置
    options: {
        onClick: wrappedChartOnClick
    }
})

如果需要支持多个后置回调，可以维护一个回调队列，动态往队列里添加函数即可。

方案2：猴子补丁覆写原有回调（适合无法直接修改初始配置的场景） #

如果原有ChartJS配置已经封装在内部无法直接修改，可以通过覆写实例的onClick方法注入自定义事件触发逻辑：

// 保存原有的onClick处理函数
const originalOnClick = yourChartInstance.options.onClick;

// 覆写onClick方法
yourChartInstance.options.onClick = function(...args) {
    // 先执行原有逻辑
    originalOnClick.apply(this, args);
    // 触发自定义事件，传递上下文参数
    const completeEvent = new CustomEvent('chart-click-complete', {
        detail: {
            nativeEvent: args[0],
            chart: this
        }
    });
    chartElement.dispatchEvent(completeEvent);
}

// 监听自定义事件执行后置逻辑，保证在原处理完成后触发
chartElement.addEventListener('chart-click-complete', (e) => {
    const { nativeEvent, chart } = e.detail;
    // 你的后置业务逻辑
})

方案3：等待图表更新完成后执行 #

如果你的后置逻辑依赖图表渲染完成的状态，可以利用ChartJS的update方法回调能力，调整原有处理函数中的update调用：

// 原有处理函数内部调用update时，传入回调
function handleDoubleClickAddPoint(e) {
    // 修改图表数据逻辑
    yourChartInstance.data.datasets[0].data.push(newPoint);
    // update第二个参数为渲染完成后的回调
    yourChartInstance.update('normal', () => {
        // 此处图表已完成全量渲染
        console.log('渲染完成，可访问最新的图表DOM和数据')
    })
}

内容的提问来源于stack exchange，提问作者jc_a