时间戳

首页 > 解决方案 > Apexcharts 中 dataPointSelection 事件的返回值

vue.js - Apexcharts 中 dataPointSelection 事件的返回值

问题描述

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

像这样的东西：

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

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

这是当我单击点数据时给我“TypeError：this.series is undefined”的代码。我从父组件获得的系列数据如下所示：

[{"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 上，它应该激活该系列，以便稍后访问将存储在该对象中的其他信息。

标签： vue.jsapexcharts

解决方案

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

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

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

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

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();
          }
        }
      },
    }
  }
}

推荐阅读