如何使用Vue-Chartjs发出活动？

Question

我使用VUE JS，并显示带有Chartjs的图形。当我单击图表时，我希望发出一个事件以获取父组件中的数据。我的onclick功能有效，但事件不起作用。 你对我的问题有想法吗？ 组件线2.

<script>
import { mixins, Line } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  extends: Line, 
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    const self = this;
    console.log(self);
    this.options.onClick = function (e, tooltipItems) {
      console.log(tooltipItems[0].__ob__); //.logged
      self.$emit("sendIndex", tooltipItems[0]._index);
    };
    this.renderChart(this.chartData, this.options);
  },
};
</script>
<style scoped></style>

我的主要组件

...
    <h1 v-on:sendIndex="getIndexCoord($event)">{{ indexCoord }}</h1>
...
methods: {
    getIndexCoord: function (e) {
      console.log("rrr", e); //Not logged
      this.indexCoord = e;
    },
}

求职

Answer 1

vue-chartjs document 不描述处理图表事件，但是那里是示例。

我们需要在图表上创建Ref，然后我们可以使用提供的getElementsateTateVent函数来访问有关单击元素的信息。检查链接的示例以获取更多实用程序功能 - 在这里，我刚刚提供了简化的设置。

<template>
  <Bar
    :data="chartData"
    :options="options"
    ref="chartInstance"
    @click="onClick"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { ChartComponentRef } from "vue-chartjs";
import { Bar, getElementsAtEvent } from "vue-chartjs";
import type { InteractionItem } from "chart.js";

const chartInstance = ref<ChartComponentRef | null>(null);

const onClick = (event: MouseEvent) => {
  const chart = chartInstance.value!.chart;

  if (!chart) {
    return;
  }

  const elements: InteractionItem[] = getElementsAtEvent(chart, event);
  if (!elements.length) return;

  console.log("elements", elements);
};
</script>

PS：当我第一次尝试使用[emagy＆nbsp; emagy＆nbsp; /code>我看到了错误打字稿错误ts2590：表达式产生的联合类型太复杂而无法表示。 - 我升级到。

Answer 2

1.首先创建eventbus.js文件
从“ vue”导入vue;

export const EventBus = new Vue();

2.在您的char.js文件代码下方，如下

import { EventBus } from "../EventBus.js";
import { mixins, Line } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  extends: Line, 
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    const self = this;
    console.log(self);
    this.options.onClick = function (e, tooltipItems) {
      console.log(tooltipItems[0].__ob__); //.logged
      EventBus.$emit("sendIndex", tooltipItems[0]._index);
    };
    this.renderChart(this.chartData, this.options);
  },
};

3. 您要在该文件中访问该数据的位置，例如

    来自“ ..//eventbus.js”的导入{eventBus};
   安装（）{
   
      eventbus。$ on（'sendIndex'，data =＆gt; {
         console.log（数据）
        }）;
   
   }，，