无法在vue中动态更新Apexchart的类别（x轴标签）答案

【问题标题】：Unable to update Apexchart's category (x-axis label) dynamically in vue无法在vue中动态更新Apexchart的类别（x轴标签）
【发布时间】：2022-12-11 14:04:39
【问题描述】：

我正在使用 Apexchart 的条形图并注意到我无法更改 x 轴的标签，即 categories。下面是组件：

<template>
   <div>
     {{magnitudeByFreq}}
     {{chartOptions}}
     <apex-chart width="500" type="bar" :options="chartOptions" :series="series"></apex-chart>
   </div>
</template>

<script>
export default {
  props: {
    processedMouseData: null,
    gradientCountByType: null,
    magnitudeByFreq: null,
  },
  data: function() {
    return {
      chartOptions: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: []//['Positive', 'Neutral', 'Negative']
        }
      },
      series: [{
        name: 'series-1',
        data: []
      }]
    }
  },
  mounted() {
  },
  watch: {
    gradientCountByType: function() {
      console.log(this.series.data)
      this.gradientCountByType ? this.series[0].data = this.gradientCountByType : console.log("Not working")
      this.gradientCountByType ?  this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis")
    },
    magnitudeByFreq: function() {
      this.magnitudeByFreq ? this.series[0].data = Object.values(this.magnitudeByFreq) : console.log("ABX")
      this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA")
    }
  }
};
</script>

当前 categories 设置为 []。这是因为我希望它由不同的数据填充，具体取决于哪个道具正在使用它。即gradientCountByType 或magnitudeByFreq。

下面两行应该设置category：

this.gradientCountByType ?  this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis")
this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA")

他们似乎根本不更新类别。然而，我应该提到模板{{magnitudeByFreq}} 和{{chartOptions}} 中显示的内容确实反映了category 变量中的变化：

{{chartOptions}} 显示：

{ "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "Positive", "Neutral", "Negative" ], "convertedCatToNumeric": false } }

和

{ "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "+0", "+100", "+1000", "+2000" ], "convertedCatToNumeric": false } }

为什么 categories 属性显示不正确？不管出于什么原因，categories 显示的是数字。

【问题讨论】：

标签： vue.js apexcharts

【解决方案1】：

我的猜测是通过更改数据属性实际上并没有更新图表。

相反，我们应该创建对图表的引用：

<apex-chart ref="radar" type="radar" height="350" :options="chartOptions" :series="series"></apex-chart>

然后我们可以使用 updateSeries 方法更新数据并使用 updateOptions 方法更新 chartOptions ：

this.$refs.radar.updateSeries([{
      name: 'Series 1',
      data: [your_new_data_here] //ie [1,2,3,4]
}])

this.$refs.radar.updateOptions({
      xaxis: {
        categories: [your_new_categories_here] //ie ["a","b","c","d"]
      }
})

【讨论】：

【解决方案2】：

<apex-chart ref="chart" :options="options" :series="series"/>

图表组件有刷新功能。所以我们可以重新渲染图表。

this.series[0].data = [yourData];
this.options.xaxis.categories = [yourCategories]
this.$refs.chart.refresh();

【讨论】：