Date selection not happening with a click in chartjs in the context of vuejs

问题

I have used chartjs in order to display chart, and I am using API to fetch my data and same is fed to the chart.

Here is my Chart_from_API.vue

<template>
  <div class="chart-container" style="position: relative; height: 25vh; width:100%;">
<div id="range-selector">
    <input type="button" id="1m" @click="selectPeriod" class="period ui-button" value="1m" />
    <input type="button" id="3m" @click="selectPeriod" class="period ui-button" value="3m" />
    <input type="button" id="6m" @click="selectPeriod" class="period ui-button" value="6m" />
    <input type="button" id="all" @click="selectPeriod" class="period ui-button" value="All" />
  </div>
    <canvas id="DisplayChart" ></canvas>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'Chart_from_API',
  data () {
    return {
      Chart_data: []
    }
  },
   mounted () {
       this.display(this.Chart_data)
   },
   methods: {
       display (Chart_data) { `this.$http.get('https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs') //Your API has to be given here`
      .then((response) => {
        const result = response.data
        const ctx = document.getElementById('DisplayChart').getContext('2d')
        for (let i = 0; i < result.date.length; i++) {
          Chart_data.push({
            x_axis: moment(result.date[i], 'X').toDate(),  //To Convert Unix Timestamp into Date
            y_axis: result.challenge[i]
          })
        }
        // eslint-disable-next-line init-declarations,prefer-const
        let myChart
        if (myChart !== undefined) {
          myChart.destroy()
        }

        // eslint-disable-next-line no-undef
        myChart = new Chart(ctx, {
          type: 'line',
          data: {
            datasets: [
              {
                label: 'Chart_from_API',
                data: this.Chart_data,
                borderColor: '#EA5455',
                lineTension: 0
              }
            ]
          },
          options: {
            lineTension: 0,
            maintainAspectRatio: false,
            legend: {
              display: false
            },
            scales: {
              yAxes: [
                {
                  scaleLabel: {
                    display: false
                  },
                  ticks: {
                    beginAtZero: true,
                    // eslint-disable-next-line no-unused-vars
                    callback (value) {
                      return `${value  }k`    // y-axis value will append k to it
                    }
                  }
                }
              ],
              xAxes: [
                {
                  type: 'time',
                  time: {
                    unit: 'month'
                  },
                  scaleLabel: {
                    display: true,
                    labelString: ''
                  }
                }
              ]
            }
          }
        })
      })
      .catch((error) => {
        console.log(error)
      })
  },
 selectPeriod(event) {
      let period = event.target.value;
      let minValue = new Date(Math.max(...this.date) * 1000);
      let axisXMin = new Date(Math.min(...this.date) * 1000);

      switch (period) {
        case "1m":
          minValue.setMonth(minValue.getMonth() - 1);
          break;
        case "3m":
          minValue.setMonth(minValue.getMonth() - 3);
          break;
        case "6m":
          minValue.setMonth(minValue.getMonth() - 6);
          break;
        case "1y":
          minValue.setYear(minValue.getFullYear() - 1);
          break;
        default:
          minValue = axisXMin;
      }
      let data = this.Chart_data.filter(el => {
        return el.x >= minValue
      })
      this.display(data);
    }
 }

}

Here are the errors that i am getting if i click any of the button for Date selection:

Please tell if there are any mistakes in my code, and i want to know why i am getting those errors.

回答1:

Firstly, you have to fetch the data and store it inside the data property of Vue. Then, You have to filter the data according to your need.Here is the fiddle.

<div id='app'>
  <div id="range-selector">
    <input type="button" id="1m" @click="selectPeriod" class="period ui-button" value="1m" />
    <input type="button" id="3m" @click="selectPeriod" class="period ui-button" value="3m" />
    <input type="button" id="6m" @click="selectPeriod" class="period ui-button" value="6m" />
    <input type="button" id="all" @click="selectPeriod" class="period ui-button" value="All" />
  </div>
  <canvas ref='chart' width='800' height='600'></canvas>
</div>

Here is the script.

new Vue({
  data: () => ({
    date: [

    ],
    challenge: [],
    data: []
  }),

  mounted() {
    fetch("https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs")
      .then(response => response.json())
      .then(result => {

        this.date = result.date;
        this.challenge = result.challenge;
        this.data = result.date.map((date, index) => ({
          x: new Date(date * 1000),
          y: result.challenge[index]
        }));
        this.buildGraph(this.data);
      });

  },
  methods: {
    buildGraph(data) {
      console.log(data.length);
      let ctx = this.$refs.chart.getContext('2d')
      let chart = new Chart(ctx, {
        type: 'line',
        data: {
          datasets: [{
            data
          }]
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'month',
                displayFormats: {
                  month: 'MMM YYYY'
                }
              }
            }],
            yAxes: [{
              ticks: {
                callback: function(value, index, values) {
                  return value + 'k';
                }
              }
            }]
          }
        }
      })
    },

    selectPeriod(event) {
      let period = event.target.value;
      let minValue = new Date(Math.max(...this.date) * 1000);
      let axisXMin = new Date(Math.min(...this.date) * 1000);

      switch (period) {
        case "1m":
          minValue.setMonth(minValue.getMonth() - 1);
          break;
        case "3m":
          minValue.setMonth(minValue.getMonth() - 3);
          break;
        case "6m":
          minValue.setMonth(minValue.getMonth() - 6);
          break;
        case "1y":
          minValue.setYear(minValue.getFullYear() - 1);
          break;
        default:
          minValue = axisXMin;
      }
      let data = this.data.filter(el => {
        return el.x >= minValue
      });
      this.buildGraph(data);
    }
  }
}).$mount('#app')

来源：https://stackoverflow.com/questions/65473904/date-selection-not-happening-with-a-click-in-chartjs-in-the-context-of-vuejs