Возвращаемое значение из события dataPointSelection в Apexcharts

У меня есть вопрос, связанный с этим вопросом и этот ответ, но они не решают полностью мой вопрос. Я использую 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.js apexcharts
person Hermi    schedule 27.03.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Самый простой способ - привязать событие прямо в компоненте

<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();
          }
        }
      },
    }
  }
}
person junedchhipa    schedule 27.03.2019

arrow_upward
0
arrow_downward

Я думаю, это просто то, что вы ищете

chart: {
    type: 'area',
    events: {
        dataPointSelection(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

если вам нужно по клику, это лучше

chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

источник Как получить доступ к значению в функции dataPointSelection в Apexchart

события документации https://apexcharts.com/docs/options/chart/events/

person Francesco Orsi    schedule 12.02.2021