从 Apexcharts 中的 dataPointSelection 事件返回值 [英] Return value from dataPointSelection event in Apexcharts

问题描述

我有一个与这个问题和这个答案 但他们并没有完全解决我的问题.我正在使用 vue 和 apexcharts，我想从事件中返回一个值或更新一个变量.是否可以返回某些内容而不是在控制台中打印它?

I have a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?

像这样:

    events: {
        dataPointSelection: function (event, chartContext, config) {
            this.active = this.series[config.seriesIndex];
        }
    }

我面临的问题是this"引用了整个vue组件，因此找不到series"和active".

The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.

当我点击一个点数据时，这是给我TypeError: this.series is undefined"的代码.我从父组件获取的系列数据如下所示:

Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:

[{"name":"S-1","data":[[2.65,100], [6.67,100]]}, {"name":"S-2","data":[[0,50],[2.65,50]]}]

<script>
  import VueApexCharts from 'vue-apexcharts';

  export default {
    name: "myGraph",
    components: {
      apexchart: VueApexCharts,
    },
    props: {
      series: {}
    },
    data: () => ({
        active: undefined,
        chartOptions: {
          chart: {
            width: '100%',
            animations: {
              enabled: false
            },
            events: {
              dataPointSelection: function (event, chartContext, config) {
                this.active = this.series[config.seriesIndex];
              }
            }
          },
          tooltip: {
            intersect: true,
            shared: false
          },
          markers: {size: 1},
      }
    }),
   }
 }
</script>

这个想法是，在 dataPointSelection 上，它应该激活该系列，以便稍后访问将存储在该对象中的其他信息.

The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.

推荐答案

最简单的方法是直接在组件中绑定事件

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: {
  dataPointSelectionHandler(e, chartContext, config) {
    console.log(chartContext, config)
  }
}

另一种方法是在图表配置中使用 ES6 箭头函数

Another way is to use ES6 arrow functions in your chart configuration

computed: {
  chartOptions: function() {
    return {
      chart: {
        events: {
          dataPointSelection: (e, chart, opts) => {
            // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
            this.VueDemoMethod();
          }
        }
      },
    }
  }
}

这篇关于从 Apexcharts 中的 dataPointSelection 事件返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！