Как вставить переменное количество наборов данных в данные диаграммы, без _observer "magic" _ (используя vuecharts.js)?

Question

Я использую charts.js для Vue и пытаюсь выдвинуть на график переменное количество наборов данных (которые содержат backgroundColour, data и label).Объект данных должен регистрировать что-то вроде этого:

Однако наборы данных регистрируют дополнительный объект-наблюдатель, а диаграммы не визуализируют.Это мой код:

   let dynamicDataCollection = [];
        for (i =0; i < allDeptNames.length; i++) {
            let datasets = [
                {
                label: allDeptNames[i],
                backgroundColor: barColours[i],
                data: [spaceIterationIns[i].length] 
                }
            ]
            dynamicDataCollection.push(datasets);
        }
        that.datacollection2 = {
            labels: ['Weekly'],                
            datasets: [                              
            ]
        }
        that.datacollection2.datasets = dynamicDataCollection;
        console.log(that.datacollection2);

это мой объект данных:

data () {
    return {
        windowWidth: 0,
        windowHeight: 0,
        datacollection2: null,
        chartData: { 

        }, chartOptions: {

        }         
    }
},

это мой шаблон:

     <charts  v-if="last7DaysSelected" ref="visits_per_dept_bar"
             :css-classes="'visitsChart_bar'" 
             :chart-id="'visits_per_dept_bar'" 
             :height="150" 
             :options="chartOptions"
             :chart-data="datacollection2" 

      ></charts>

это мой chart.js

import {Line, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
chartOptions.defaultFontFamily= "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Helvetica Neue', sans-serif"

const { reactiveProp } = mixins
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],

  mounted () {
    let that = this;

    that.chartOptions = { 
      scales: {
        yAxes: [{
            ticks: {
                suggestedMin: 0,      
            },       
        }],
        xAxes: [{
            ticks: {
                suggestedMin: 0,    
            },
        }],
    },
    legend: {
        labels: {
            fontColor: 'rgb(168, 119, 181)',
        }
    }
  },
    this.renderChart(this.chartData, that.chartOptions)
  }
}

и это объект, который я получаю ...

Расширенный вид:

Очевидно, что Vue пытается творить чудеса, но значит ли это, что я не могу отобразить свой график с переменным количеством наборов данных?Это слишком опасно, чтобы предотвратить объект {_ ob _}.Я попробовал это, и программе vue.charts.js нужна некоторая реактивность).Есть какой-либо способ сделать это?Может быть, уловка, которая позволяет пройти через это для цикла внутри объекта datacollection2 ?вместо того, чтобы помещать объекты набора данных в коллекцию данных2 ?есть мысли?

Answer 1

Исправлено путем объединения объекта dynamicDataCollection:

     that.dynamicDataCollection = [];
        for (i =0; i < allDeptNames.length; i++) {
            let datasets = [
                {
                label: allDeptNames[i],
                backgroundColor: barColours[i],
                data: [spaceIterationIns[i].length] 
                }
            ]
            that.dynamicDataCollection.push(datasets);
        }
// here
        let dynamicFlat = [].concat.apply([], that.dynamicDataCollection)  
        that.datacollection2 = {
            labels: ['Weekly'],                
            datasets: [                           
            ]
        }
// and then here
        that.datacollection2.datasets = dynamicFlat;

Answer 2

Используйте параметры вместо:

name: 'myComponent',
data: () {
  return {
    some: 'properties'
  }
},
nonReactiveData: {
  whatever: 'you like'
}

Это в основном создает ваш компонент с option с именем nonReactiveData.Тогда вы можете использовать его в своем HTML, как:

<some-component :data="$options.nonReactiveData">

Или, если вам нужно в вашем скрипте:

methods: {
  someMethod() {
    console.log(this.$options.nonReactiveData)
  }
}

Надеюсь, что поможет:)