1

这是我的图表：

<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">—&lt;/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了选项。

4

1 回答 1

1

我想知道这甚至是如何工作的。

您返回setData图表数据和选项。哪个行不通。图表选项应该是一个单独的对象。

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

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

请记住，reactiveMixin 将更新图表或通过调用完全重新渲染它this.renderChart(chartdata, options)

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

于 2018-05-09T09:47:26.913 回答