vue 3图表js图表在单击事件中未定义

ej83mcc0  于 2023-02-24  发布在  Vue.js
关注(0)|答案(1)|浏览(144)

我目前正试图将我的网站从vue 2升级到vue 3,作为其中的一部分,我不得不将vue-chartjs从版本4升级到版本5,它似乎已经打破了我的点击事件。
以前,我的页面上的图表是这样的:

<bar v-if="loaded"
   ref="chart"
   :data="chartData"
   :options="chartOptions">
</bar>

import { Bar } from 'vue-chartjs';

我可以在选项单击事件中使用以下代码:

onClick: event => {
    const chart = this.$refs.chart._data._chart;
    const activeElement = chart.getElementAtEvent(event)[0];
}

由于我已经升级,_data现在是未定义的,所以我尝试通过执行this.$refs.chart.chart来获取图表对象,但是现在我得到了以下错误:
chart.getElementAtEvent不是函数
有人知道如何获得图表,以便我可以调用getElementAtEvent-或者这是否仍然是从被单击的栏中获得标签的正确函数吗?
Current code stackblitz

6jjcrrmo

6jjcrrmo1#

如V3迁移指南中所述
getElementAtEvent已替换为chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
工作沙盒链接:https://stackblitz.com/edit/github-ofrpcb-srknqa?file=src%2FApp.vue

相关问题