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

时间:2018-05-08 09:28:00

标签: javascript vue.js chart.js vue-chartjs

这是我的图表:

<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

1 个答案:

答案 0 :(得分:1)

我想知道这是如何运作的。

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

您已在图表组件中定义了options道具,但未向其传递任何选项。

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

请注意,reactiveMixin会更新图表或通过调用this.renderChart(chartdata, options)

完全重新呈现图表

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