如何在没有_observer "magic"_(使用vuecharts.js)的情况下将可变数量的数据集推送到图表数据?
How to push a variable number of datasets to a chart data, without the _observer "magic"_ (using vuecharts.js)?
我正在为 Vue 使用 charts.js 并尝试将可变数量的数据集(包含背景颜色、数据和标签)推送到图表。数据对象应记录如下内容:
但是数据集正在记录一个额外的观察者对象,并且图表没有呈现。
这是我的代码:
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 对象中遍历 for 循环 的技巧?而不是将数据集对象推送到 datacollection2?有什么想法吗?
改用options:
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)
}
}
希望对您有所帮助:)
通过连接 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;
我正在为 Vue 使用 charts.js 并尝试将可变数量的数据集(包含背景颜色、数据和标签)推送到图表。数据对象应记录如下内容:
但是数据集正在记录一个额外的观察者对象,并且图表没有呈现。 这是我的代码:
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 对象中遍历 for 循环 的技巧?而不是将数据集对象推送到 datacollection2?有什么想法吗?
改用options:
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)
}
}
希望对您有所帮助:)
通过连接 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;