Я обращаюсь к API, сохраняю результаты в данных, а затем использую v-for
для вывода этих данных в таблицу. Один из столбцов включает в себя vuechart, но я не могу заставить его что-либо отображать. Если я проверю созданный компонент, у него есть данные в массиве props, но нет кубиков при получении столбцов.
Есть ли что-то особенное в размещении диаграмм vuechart в циклах v-for
? Или я что-то не правильно пропускаю?
Вот код:
TrendChart.js
import {Bar} from 'vue-chartjs'
export default {
extends: Bar,
name: 'TrendChart',
props: ['data', 'options'],
mounted() {
this.renderChart(this.data, this.options)
}
}
results.vue
<table>
<tr v-for = "result in results">
...
<td>
<trend-chart :data = "result.trends", :options = "{responsive: false, maintainAspectRatio: false}"></trend-chart>
...
</table>
Если я проверю компонент после его рендеринга, я вижу, что реквизиты есть, но данные, похоже, не попадают в диаграмму или, как я полагаю, я еще никогда не видел успешных (это результат Инструменты Vue dev в текстовом формате):
props
chartId:"bar-chart"
cssClasses:""
data:Array[12]
height:400
options:Object
maintainAspectRatio:false
responsive:false
plugins:Array[0]
styles:undefined
width:400
data
_chart:Unknown Component
_plugins:Array[0]
Отметьте Руководство по диаграммам Vue, первый параметр для this.renderChart()
- это один объект вместо одного массива.
Например, который скопирован из приведенного выше руководства:
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
Исправьте это, тогда графики должны работать нормально.
Ниже приведена одна простая демонстрация:
Vue.config.productionTip = false
let RawLineChart = window.VueChartJs.Bar
Vue.component('line-chart', {
extends: RawLineChart,
props: ['data', 'options', 'name'],
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: this.name,
backgroundColor: '#f87979',
data: this.data
}
]
}, this.options)
}
})
new Vue({
el: '#app',
data() {
return {
results: [
{name:'Chart A', trends: [40, 39, 20, 40, 39, 80, 40]},
{name:'Chart B', trends: [140, 139, 110, 140, 139, 80, 140]},
{name:'Chart C', trends: [240, 139, 210, 140, 239, 80, 240]}
]
}
}
})
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src = "https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id = "app">
<table>
<tr v-for = "result in results">
<td>{{result.name}}</td>
<td>
<line-chart :data = "result.trends" :name = "result.name" :options = "{responsive: false, maintainAspectRatio: false}">
</line-chart>
</td>
</tr>
</table>
</div>
Спасибо тебе за это! Я думаю, что ваш исходный комментарий был правильным, я просто неправильно отправлял объект (а потом, возможно, не мог напечатать ...).