Question

我正在使用vue2-highcharts构建饼图。在包含HighCharts图表的组件中，有一个名为showOverlay的布尔变量。当发生HighCharts showOverlay事件时，我正在尝试更改click的值。

组件代码为：

<template>
  <section class="charts">
    <vue-highcharts :options="pieOptions" ref="pieChart"></vue-highcharts>
  </section>
</template>

<script>
  /* eslint-disable */
  import VueHighcharts from 'vue2-highcharts'
  export default {
    components: {
      VueHighcharts
    },
    props: ['score', 'show'],
    data() {
      return {
        showOverlay: false,
        pieOptions:
          {
            chart: {
              type: "pie",
              options3d: {
                enabled: false,
                alpha: 45
              }
            },
            plotOptions: {
              pie: {
                innerSize: 100,
                depth: 45
              },
              series: {
                cursor: 'pointer',
                point: {
                  events: {
                    click: function (e) {
                      // ----- HERE I WANT TO SET showOverlay -----
                      // ----- for example: this.showOverlay = false -----
                      alert('Category: ' + this.name + ', value: ' + this.y);
                    }
                  }
                }
              }
            },
            series: [
              {
                name: "Platform Score",
                data: [
                  ["Spotify", 3],
                  ["Deezer", 1]
                ]
              }
            ]
          }
      }
    },
    methods: {
    }
  }
</script>

如您所见，我在代码中标记了要更改showOverlay值的位置，但是this在该行保留了HighCharts实例，但我不知道如何访问Vue实例以更改showOverlay的值。

值得一提的是：最终目标是$emit更改父组件。我在另一个post中找到了一个相关建议，将数据设置移到mounted钩子中并使用箭头功能：

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', 'someData');
        }
      } 
    }]
  })
}

但是当我尝试进行一些修改后：

mounted () {
    const that = this;
    this.$refs.pieChart.chart(this.$el, { 
      series: [{ 
        events: {
          click: () => { 
            that.$emit('somethingHappened', 'someData')
          }
        } 
      }]
    })
  },

我遇到以下错误：

this.$refs.pieChart.chart is not a function

我该如何解决？

Answer 1

在组件的数据内部，将pieOptions.plotOptions.series.point.events.click更改为arrow-function将在处理程序内将Vue实例提供为this。 HighCharts系列点（以前是this处理程序中的click）以point的形式存储在事件参数中，因此您的pieOptions Vue数据应如下所示：< / p>

click: ({point}) => {
  this.showOverlay = false;
  alert('Category: ' + point.name + ', value: ' + point.y);
  this.$emit('somethingHappened', 'someData');
}

demo

从Highchart事件内部更改VueJS组件数据值

1 个答案: