vue.js - How do i display different charts from single method and how i can import that to other component

Question

I want to display different charts from a single method. I am making use of API. All charts have same options but their API s endpoint is different.

Here is my Chart.vue in which i have used the Date range selector also which should be showed to every charts. Here i have displayed only one chart and have directly specified the endpoint of the API. But i want to use some prop in the endpoint like - this.$http.get('/charts/' + id + '/all') and want to display the other charts.

<template>
  <div class="Different charts">
    <div id="range-selector">
      <input type="button" id="1m" @click="select" class="period ui-button" value="1m" />
      <input type="button" id="3m" @click="select" class="period ui-button" value="3m" />
      <input type="button" id="6m" @click="select" class="period ui-button" value="6m" />
      <input type="button" id="all" @click="select" class="period ui-button" value="All" />
    </div>
    <canvas ref='chart' width='800' height='600'></canvas>
       Here i should display other charts from same method, but only change in API endpoint.
  </div>
</template>

<script>
export default {
    data: () => ({
      date: [],
      challenge: [],
      data: []
    }),
    mounted() {
      this.$http.get('/charts/8/all')
        .then((resp) => {
          this.date = resp.data.date
          this.challenge = resp.data.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))
          this.Graph(this.data);
        })
    },
    methods: {
      Graph(data) {

        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) {
                    return value + 'k'
                  }
                }
              }]
            }
          }
        })
      },

      select(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;
          default:
            minValue = axisXMin;
        }
        let data = this.data.filter(el => {
          return el.x >= minValue
        });
        this.Graph(data);
      }
    }
}
</script>

I have displayed this chart in another component as:

<template>
  <div class="chart">
    <chart></chart>
    //Here i want to display other charts coming from same vue component.
  </div>
</template>

<script>
import chart from 'chart.vue'
export default{
  component: [chart]
}
</script>

Please someone help me with this. I tried using the props but don't know why that dint work out for me. May be i missed something, so please someone show me how exactly to do this. Please send me the modified code so that i can understand it clearly.

My objective: To display different charts from a single method and also to import the charts in another component. Only my endpoint is different in the charts.

Answer 1

等待大神答复