我目前正试图将我的网站从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
1条答案
按热度按时间6jjcrrmo1#
如V3迁移指南中所述
getElementAtEvent
已替换为chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
工作沙盒链接:https://stackblitz.com/edit/github-ofrpcb-srknqa?file=src%2FApp.vue