ChartJS 如何将可变数量的数据集推送到图表数据中，而不使用_observer“magic”_(使用vuecharts.js)？

1cklez4t 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(139)

我正在使用charts.js for Vue，并尝试将可变数量的数据集（包含backgroundColour、data和label）推送到图表中。data对象应该记录如下内容：

但是数据集记录了一个额外的观察者对象，并且图表没有呈现。

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程序需要一些React）。有什么方法可以做到这一点吗？也许有一个技巧可以允许在 * datacollection 2 * 对象内部执行 *for循环 *？而不是将数据集对象推送到 * datacollection 2 *？有什么想法吗？

chart.js

来源：https://stackoverflow.com/questions/52593409/how-to-push-a-variable-number-of-datasets-to-a-chart-data-without-the-observer

2条答案

按热度按时间

mccptt671#

请改用选项：

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

这基本上创建了一个名为nonReactiveData的option组件，然后可以在html中使用它，如下所示：

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

或者，如果脚本中需要它：

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

希望能有所帮助：）

赞(0）回复(0）举报 2022-11-06

ewm0tg9j2#

通过连接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;

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 如何将可变数量的数据集推送到图表数据中，而不使用_observer“magic”_(使用vuecharts.js)？

2条答案

相关问题

热门标签

最新问答