javascript - 如何在没有 _observer "magic"_(使用 vuecharts.js)的情况下将可变数量的数据集推送到图表数据?

标签 javascript vue.js chart.js observers vue-chartjs

我正在使用 Charts.js for Vue 并尝试将可变数量的数据集(包含背景颜色、数据和标签)推送到图表。数据对象应该记录如下内容:

enter image description here

但是,数据集正在记录额外的观察者对象,并且图表未呈现。 这是我的代码:

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

这就是我得到的对象...... the vue Observer object is prying

扩展 View : Expanded view

很明显,Vue 正在尝试发挥其魔力,但这是否意味着我无法使用可变数量的数据集来渲染图表? 阻止 {_ ob _} 对象太危险了。我已经尝试过了,vue.charts.js 程序需要一些 react 性)。 有什么办法可以做到这一点吗?也许是一个允许在 datacollection2 对象内遍历 for 循环 的技巧?而不是将数据集对象推送到datacollection2?有什么想法吗?

最佳答案

使用options相反:

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

这基本上会使用名为 nonReactiveData选项创建组件。然后你可以在你的 html 中使用它,例如:

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

或者如果您的脚本中需要它:

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

希望有帮助:)

关于javascript - 如何在没有 _observer "magic"_(使用 vuecharts.js)的情况下将可变数量的数据集推送到图表数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52593409/

相关文章:

javascript - 从数组向 Chart.JS 添加标签和颜色

javascript - 单击 iframe 内容页面中的显示隐藏按钮时,iframe 高度不会自动增加

javascript - 如何在我的 wordpress 导航菜单上选择两类具有多类的 <li>?

javascript - ExtJS/Javascript : adding a child Model to a parent Model, 在网格上呈现

vue.js - Vue 路由器链接警告

angular - Ionic 3 Angular Chart.js 更新数据

javascript - Javascript 中 null 和 undefined 与 bool 值的比较

javascript - "Type Error: Cannot read property ' 尝试在 VueJS 中使用路由器时推送 ' of undefined"

vue.js - 如何在 Vue3 中使用单个观察者观察 ref 和 reactive 对象

chart.js - 在 Chart.js 上创建水平条形图扩展