Vue-Chart.js: 图表不是从零开始的

Question

这是我的图表：

<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>

当我第一次打开带有图表的页面时，它会正确地显示从 0 开始的 yAxes。但是当我用日期选择器选择一个时间段并将数据传递给图表时，它会显示 yAxes 从最小数字开始来自后端。有人可以建议如何避免这种情况吗？

使此图表具有响应性也有问题。它以某种方式忽略了选项中的 responsive: true。

Answer 1

我想知道这是怎么回事。

您 return 在您的 setData 中，图表数据和选项。这是行不通的。图表选项应该是一个单独的对象。

您在图表组件中定义了一个 options 道具，但您没有向它传递任何选项。

您必须将图表数据和选项都传递给您的图表组件。如果您将图表选项传递到图表组件的选项属性中，它应该可以工作。

请记住，reactiveMixin 将通过调用 this.renderChart(chartdata, options)

更新图表或完全重新渲染图表

因此，如果您不传递任何选项，它将使用默认选项重新呈现。

Vue-Chart.js: 图表不是从零开始的

Vue-Chart.js: a chart doesn't begin from zero

javascript

vue.js

chart.js

vue-chartjs