Как передать переменное количество наборов данных в данные диаграммы без «волшебства» _ _observer (с использованием vuecharts.js)?
Я использую 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.info(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? вместо того, чтобы помещать объекты набора данных в datacollection2? Есть предположения?
не могли бы вы поделиться своим объектом данных
Я поделился своим объектом данных.
@ceejayoz Я пробовал статический компонент vue, но он не работает. программа Datasets из vue chart.js была написана как реактивная, и именно эту переменную / объект мне нужно передать в объект dataCollection. если я заставлю это быть статичным, диаграмма не будет обновляться (он жалуется, что может установить свойство _meta в строку) ... но в любом случае спасибо. может быть полезным инструментом в другой ситуации
Нет необходимости в каких-либо внешних библиотеках - они встроены в Vue;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вместо этого используйте параметры:
name: 'myComponent',
data: () {
return {
some: 'properties'
}
},
nonReactiveData: {
whatever: 'you like'
}
Это в основном создает ваш компонент с option с именем nonReactiveData. Затем вы можете использовать его в своем html, например:
<some-component :data = "$options.nonReactiveData">
Или, если вам это нужно в вашем скрипте:
methods: {
someMethod() {
console.info(this.$options.nonReactiveData)
}
}
Надеюсь, это поможет :)
Привет. Это полезно знать, но, как я уже сказал ранее в своем ответе на @ceejayoz, я считаю, что программа наборы данных из vue chart.js была написана как реактивная, и это именно та переменная / объект, которую мне нужно отправить в объект dataCollection. Но в любом случае спасибо, это связано и может быть полезным инструментом в другой ситуации, поэтому я проголосовал за ваш ответ.
Исправлено путем объединения объекта 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;