这是我的图表:
<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>
当我第一次打开带有图表的页面时,它的行为正确显示yAx从0开始。但是当我选择带日期选择器的句点并将数据传递到图表时,它会显示从最小数字开始的yAxes从后端。任何人都可以建议如何避免这种情况?
同样存在使此图表响应的问题。它以某种方式忽略了选项中的responsive: true
。
答案 0 :(得分:1)
我想知道这是如何运作的。
您返回setData
两者,图表数据和选项。
哪个不行。图表选项应该是一个单独的对象。
您已在图表组件中定义了options
道具,但未向其传递任何选项。
您必须将图表数据和选项都传递给图表组件。 如果将图表选项传递到图表组件的选项支柱中,它应该可以工作。
请注意,reactiveMixin会更新图表或通过调用this.renderChart(chartdata, options)
因此,如果您没有传递任何选项,它将使用默认选项重新渲染。