Вот мой график:
<script>
import { Bar, mixins } from 'vue-chartjs';
export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['options'],
mounted() {
this.renderChart(this.chartData, this.options);
},
};
</script>
А вот мой компонент, страница со средствами выбора даты и диаграммой:
<template>
...
<datepicker v-model="periodStart"
minimum-view="month"
format="MMMM yyyy"
placeholder="Choose date"
language="ru"/>
<span class="dash">—</span>
<datepicker v-model="periodEnd"
minimum-view="month"
format="MMMM yyyy"
placeholder="Choose date"
language="ru"/>
<test-chart :chart-data="setData" />
</template>
<script>
import moment from 'moment';
import { mapGetters, mapActions } from 'vuex';
import Datepicker from 'vuejs-datepicker';
import TestChart from '../charts/TestChart';
export default {
data() {
return {
periodStart: new Date(),
periodEnd: new Date(),
};
},
components: {
Datepicker,
TestChart,
},
computed: {
...mapGetters(['getReport', 'getChartLabels', 'getChartData']),
setData() {
return {
options: {
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
min: 0,
},
}],
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
categoryPercentage: 0.5,
barPercentage: 1,
},
}],
},
responsive: true,
maintainAspectRatio: false,
},
labels: this.getChartLabels,
datasets: [
{
label: 'Количество активных резюме',
backgroundColor: '#f87979',
data: this.getChartData,
},
],
};
},
},
</script>
Когда я впервые открываю страницу с графиком, она ведет себя корректно, показывая yAxes, начинающиеся с 0. Но когда я выбираю период с помощью выбора даты и передаю данные на график, он показывает yAxes, начиная с минимального числа, которое пришло с заднего конца. Кто-нибудь может посоветовать, как этого избежать?
Также есть проблема с адаптацией этого графика. Каким-то образом он игнорирует responsive: true в настройках.