ApexCharts运行时更新自定义变量数组失效、tooltip未更新问题

• 错误重复初始化图表实例：fnUpdGraph 中重复调用 new ApexCharts 创建实例，没有复用全局已初始化的chart对象，会导致配置冲突。
• ApexCharts 原生的 updateOptions 方法更新series时，默认只会合并官方预定义的series字段（如name、data等），你自定义的data_alt、data_action属于额外字段，不会被自动同步到内部配置中，所以tooltip读取的还是旧值。

有两种可靠的实现方式，推荐使用第二种官方兼容的写法：

方式1：手动同步自定义配置 #

修复fnUpdGraph中的重复实例化问题，更新配置后手动把自定义字段同步到图表内部配置对象：

function fnUpdGraph(){
    // 删除重复初始化的代码，直接用全局的chart实例
    try{
        // 先定义新的自定义数组
        const newDataAlt = ["1dot1_alt", "1dot2_alt", "1dot3_alt", "1dot4_alt", "1dot5_alt", "1dot6_alt", "1dot7_alt", "1dot8_alt", "1dot9_alt", "1dot10_alt", "1dot11_alt", "1dot12_alt"];
        const newDataAction = ["1dot1_action", "1dot2_action", /* 其余新值按需补充 */];
        chart.updateOptions({
            series: [{
                data: [23111, 7410, 27977, 74447, 3412, 4979, 4944, 9403, 4575, 11645, 861, 74416],
                data_alt: newDataAlt,
                data_action: newDataAction
            }],
            xaxis:{
                categories: ["Jul 20", "Aug 20", "Sep 20", "Oct 20", "Nov 20", "Dec 20", "Jan 21", "Feb 21", "Mar 21", "Apr 21", "May 21", "Jun 21"]
            }
        })
        // 手动同步自定义字段到内部配置
        chart.w.config.series[0].data_alt = newDataAlt;
        chart.w.config.series[0].data_action = newDataAction;
    }
    catch(e){
        alert(e)
    }
}

方式2（推荐）：将自定义属性绑定到数据点 #

ApexCharts支持series.data数组传入带额外属性的对象，自定义属性会跟随数据自动更新，不需要手动同步，兼容性更好：

步骤1：修改初始化的series结构 #

series: [{
    name: 'Denied Charges ($)',
    // data每个元素用对象存储，y是数值，其余是自定义属性
    data: [
        {y:33111, data_action:"dot1_action", data_alt:"dot1_alt"},
        {y:27510, data_action:"dot2_action", data_alt:"dot2_alt"},
        // 其余数据点按上面格式补充即可
    ]
}],

步骤2：修改tooltip自定义函数，直接从数据点取属性 #

tooltip: {
    enabled: true,
    intersect:true,
    shared:false,
    custom: function({series, seriesIndex, dataPointIndex, w}) {
        // 直接从数据点取自定义属性
        const currentPoint = w.config.series[seriesIndex].data[dataPointIndex];
        return '<div class="chart-tooltip">' + currentPoint.data_alt + '</div>'
    }
},

步骤3：修改事件回调里的取值逻辑 #

dataPointSelection: function(event, chartContext, config) {
    bar_number = config.dataPointIndex;
    const currentPoint = chartContext.w.config.series[0].data[bar_number];
    alert(currentPoint.data_action)
},

步骤4：修改更新逻辑 #

function fnUpdGraph(){
    try{
        chart.updateOptions({
            series: [{
                data: [
                    {y:23111, data_action:"1dot1_action", data_alt:"1dot1_alt"},
                    {y:7410, data_action:"1dot2_action", data_alt:"1dot2_alt"},
                    // 其余新数据点按格式补充
                ]
            }],
            xaxis:{
                categories: ["Jul 20", "Aug 20", "Sep 20", "Oct 20", "Nov 20", "Dec 20", "Jan 21", "Feb 21", "Mar 21", "Apr 21", "May 21", "Jun 21"]
            }
        })
    }
    catch(e){
        alert(e)
    }
}

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