Chart.js：最后一點在折線圖之外

Question

如果不是很完美，請原諒我的英語。

當我有一個包含大量數據的折線圖時，例如6個月中每天1個點，則最后一個點沒有標簽，並且該點不在圖表中。 此后，要恢復正常圖表，我必須設置一個較小的日期范圍，例如2個月，然后我可以將其范圍擴大到錯誤出現之前的5或6個月。

正常點： https : //i.gyazo.com/b4e88afc7c94adfbeb86bf6543900d4b.jpg

外出且沒有標簽： https : //i.gyazo.com/f782e5b752ca87340ebaabe32c1e88d4.jpg

您是否曾經遇到過此錯誤，並且您知道我該如何解決？

Chart.vue：

<template>
  <div class="cdr-chart" style="height: 500px">
    <cdr-loader v-if="loading" :size="50"></codeur-loader>
    <div class="d-flex justify-content-between">
      <div class="col-md-3">
        <p class="m-0 small"><strong>Début le</strong></p>
        <input type="text" class="form-control form-control-sm admin-datepicker" :id="`${this.name}__starts_at`">
      </div>
      <div class="col-md-3">
        <p class="m-0 small"><strong>Fin le</strong></p>
        <input type="text" class="form-control form-control-sm admin-datepicker" :id="`${this.name}__ends_at`">
      </div>
      <div class="col-md-3 mt-3 mb-2">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">
            <input type="checkbox" v-model="checked" :id="`${this.name}_checkbox`">
          </span>
        <label :for="`${this.name}_checkbox`" class="form-control">Par semaine</label>
        </div>
      </div>
    </div>
    <canvas height="300"></canvas>
  </div>
</template>

<script>
/* eslint-disable func-names */
import Chart from 'chart.js';
import CdrLoader from '../../components/CdrLoader.vue';
import moment from 'moment';

const FETCH_URL = '/admin/dashboards/fetch_data';

const colors = {
  backgroundColor: [
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 99, 132, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
  ],
  borderColor: [
    'rgba(54, 162, 235, 1)',
    'rgba(255,99,132,1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
  ],
  borderWidth: 1,
};

export default {
  components: { CdrLoader },
  props: {
    name: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'line',
    },
  },
  data() {
    return {
      loading: true,
      datasets: null,
      chart: null,
      starts_at: null,
      ends_at: null,
      checked: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      const self = this;
      const startsAtDp = this.$el.querySelector(`#${this.name}__starts_at`);
      const endsAtDp = this.$el.querySelector(`#${this.name}__ends_at`);
      const checked = this.$el.querySelector(`#${this.name}_checkbox`);

      $(startsAtDp).pickadate({
        format: 'yyyy-mm-dd',
        onSet(context) {
          if (!context.select) return false;
          self.starts_at = moment(context.select).format('YYYY-MM-DD');
        },
      });

      $(endsAtDp).pickadate({
        format: 'yyyy-mm-dd',
        onSet(context) {
          if (!context.select) return false;
          self.ends_at = moment(context.select).format('YYYY-MM-DD');
        },
      });
      this.loadChart();
    });
  },
  methods: {
    loadChart() {
      this.loading = true;
      this.$http.get(`${FETCH_URL}?data=${this.name}&starts_at=${this.starts_at}&ends_at=${this.ends_at}&checked=${this.checked}`).then((response) => {
        this.datasets = response.body.datasets;
        if (this.chart) {
          this.updateChart();
        } else {
          this.initChart();
        }
        this.loading = false;
      });
    },
    initChart() {
      const ctx = this.$el.querySelector('canvas').getContext('2d');

      const datasets = [];

      this.datasets.charts.forEach((chart, index) => {
        datasets.push({
          backgroundColor: chart.background_color ? chart.background_color : colors.backgroundColor[index],
          borderColor: chart.border_color ? chart.border_color : colors.borderColor[index],
          borderWidth: 1,
          data: chart.data,
          type: chart.type,
          label: chart.label,
        });
      });

      this.chart = new Chart(ctx, {
        type: this.type,
        data: {
          labels: this.datasets.labels,
          datasets,
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              },
            }]
          },
        },
      });
    },
    updateChart() {

      const datasets = [];

      this.datasets.charts.forEach((chart, index) => {
        datasets.push({
          backgroundColor: chart.background_color ? chart.background_color : colors.backgroundColor[index],
          borderColor: chart.border_color ? chart.border_color : colors.borderColor[index],
          borderWidth: 1,
          data: chart.data,
          type: chart.type,
          label: chart.label,
        });
      });

      this.chart.data = {
        labels: this.datasets.labels,
        datasets,
      };

      this.chart.update();
    },
  },
  watch: {
    starts_at(newStartsAt) {
      this.loadChart();
    },
    ends_at() {
      this.loadChart();
    },
    checked() {
      this.loadChart();
    },
  }
};
</script>

<style lang="scss" scoped>
  .cdr-chart {
    width: 100%;
    canvas {
      height: 100%;
    }
  }
</style>