Question

我正在使用Vue 3.9.3和highcharts-vue 1.3.5。我试图在每个高位图表加载时将其放入一个对象，这样我便可以访问任何想要的图表

myCharts.aChart或

myCharts.anotherChart，

所以我可以轻松地做myCharts.anotherChart.addData

实际上，

<highcharts :constructor-type="'stockChart'" :options="options" :callback="chartcallback" ></highcharts>

然后

    data(){
      return{     
        charts:{}
      }
    },
  methods:{ 

       chartcallback(hc){
          let obj = {[hc.options.id] : hc};
          this.charts = Object.assign(this.charts, obj); 

          //also tried this 
          const newChart = {id:hc.options.id, chart : hc};
          this.$set(this.charts, newChart.id, newChart);

          //also tried this
           this.charts = Object.assign({}, this.charts, {
             [hc.options.id] : hc
           });

          //also tried this               
          this.charts[hc.options.id]= hc;

          console.log('test ', this.charts);
        } 
  }

然后我将watch我的数据，每次它们更改时，我都会向每个高位图中添加数据，

    watch: {
      myData: { 
        immediate: true,
        deep: true,             
        handler(){ 
            this.charts.NameChart.series[0].setData(this.myData[0], true);
            this.charts.DrinkChart.series[0].setData(this.myData[1], true);
            //etc....

this.charts.NameChart或this.charts.DrinkChart应该在chartcallback中构造，并且NameChart，DrinkChart是hc.options.id的值hc.options.id总是有一个值，并且在那里，我检查了。

问题是

在chartcallback做console.log('test ', this.charts);的结尾处，生成的obj是

//first time
{NameChart:chart}

//second time
{NameChart:chart}

但应该是

//first time
{NameChart:chart}

//second time
{NameChart:chart,
DrinkChart:chart}

似乎每次调用this.charts时都会覆盖chartcallback。我注意到，我尝试了几种方法，但是没有任何效果。

我该怎么办？

谢谢

无法在Vue中的HighCharts回调中附加到JS对象

0 个答案: