Vue3中使用LightningChart JS添加Y轴时触发No attach handler错误

错误成因 #

1. 轴对象引用错误：绑定Y轴时使用了yAxis.value，但chart.getDefaultAxisY()返回的就是合法的Y轴实例，.value属于多余的属性访问，导致传入的不是图表可识别的轴对象，图表无法确认该轴属于当前实例，触发报错。
2. 语法小错误：代码中ColorHEX(Palette[seriesColor[tpGroupedData])缺失一个闭合括号，虽不是触发当前报错的直接原因，但会导致后续代码执行异常。

解决办法 #

• 移除Y轴参数里的.value，直接使用yAxis作为配置项参数；
• 修正颜色字符串的语法错误，补上缺失的闭合括号。

修正后的代码 #

var dx = chart
    .addAxisX()
    .setAnimationZoom(undefined)
    .setStrokeStyle(emptyLine)
    .setTitleFillStyle(new SolidFill({ color: ColorHEX("#000") }));  

var yAxis = chart.getDefaultAxisY()
    .setTitle(yAxisTitle)
    .setAnimationZoom(undefined)
    .setTitleFillStyle(new SolidFill({ color: ColorHEX("#000") }))

// 修正yAxis.value为yAxis，同时补上ColorHEX的闭合括号
var series = chart.addPointSeries({ 
    pointShape: seriesShape[tpGroupedData], 
    xAxis: dx , 
    yAxis: yAxis
}).setPointFillStyle(new SolidFill({ color: ColorHEX(Palette[seriesColor[tpGroupedData]]) }))
.setName(groupTag.slice(0, groupTag.indexOf('(')) + '( ' + tpName + ' )');

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