无法在VUE中动态更新ApexChart类别（X轴标签）

Question

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

<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>

当前类别设置为[]。这是因为我希望它会被不同的数据填充，具体取决于Prop的使用。即gradientCountByType或agemugerbyfreq。

下面应该设置类别的两行：

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")

它们似乎根本不更新类别。但是，我应该提到，模板中显示的内容{{MATEM级byfreq}}} and {{ChartOptions}}}，确实反映了类别中的更改< /code>变量：

{{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属性无法正确显示？无论出于何种原因，类别正在显示数字。

Answer 1

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

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

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

然后，我们可以使用updateseries方法更新数据，并使用update> updateOptions方法更新图表：方法：

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"]
      }
})

Answer 2

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

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

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

Answer 3

在VUE 3中，您应该将ChartOptions放入反应性类型中，以便随时可以将其更改。

const chartOptions =ref({// your codes});

然后在每一个甲壳部或生命周期中

onMounted( () => {   chartOptions.value.xaxis.categories=myArrayValues;    }); }

Answer 4

我最近遇到了这个问题。要动态更新图表的X轴类别，您需要迭代数组（新类别）（使用或foreach），并使用push（）方法将数组的每个元素添加到X轴类别中。

let newCategories = ['Positive', 'Neutral', 'Negative']
newCategories.forEach(category => {
    this.chartOptions.xaxis.categories.push(category)   
})