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

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

2 голосов
/ 27 марта 2019

У меня есть вопрос, связанный с этим вопросом и этим ответом , но они не решают мой вопрос полностью. Я использую vue и apexcharts и хочу вернуть значение или обновить переменную из события. Можно ли вернуть что-то вместо печати в консоли?

Примерно так: 

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

Проблема, с которой я сталкиваюсь, состоит в том, что «this» ссылается на общий компонент vue, и поэтому «series» и «active» не могут быть найдены.

Вот код, который дает мне «TypeError: this.series не определено», когда я нажимаю на данные точки. Данные ряда, которые я получаю от родительского компонента, выглядят так: 

[{"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 он должен активировать эту серию, чтобы позднее получить доступ к другой информации, которая будет храниться в этом объекте.

1 Ответ

1 голос
/ 27 марта 2019

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

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